Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

PayPal form failing XHTML validation

Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#1: Jan 25 '07
I just tried validating the page I'm working on as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and it fails on the PayPal form:

<form target="paypal"... /> there is no attribute "target"

<input type="hidden" name="cmd" value="_cart" /> document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

How do I get around these transgressions?

Thank you.

Helen

Expert
  
Join Date: Oct 2006
Location: NC
Posts: 1,722
#2: Jan 26 '07

re: PayPal form failing XHTML validation

Post the whole paypal code here so we can run it through the validator.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,571
#3: Jan 26 '07

re: PayPal form failing XHTML validation

The "target" error is what it is. There is no such thing in xhtml. The only solution I am aware of is a javascript one. Visit the javascript board here or Google for it.

The second is telling me that you aren't enclosing the <input> in one of those elements which is required.
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#4: Jan 26 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by AricC

Post the whole paypal code here so we can run it through the validator.

I looked at the original PayPal html code for pasting into the page and it doesn't have the ' />' at the end – I don't know what that bracket is called – so it looks as if the designer of the site simply changed the '<>...</>' to '<... />'. Here is the code for the 'view cart' button:

<li>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="business@address.co.uk" />
<input type="image" src="images/store/view_cart.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
<input type="hidden" name="display" value="1" />
</form>
</li>

It's all a list item because it appears in the side menu beneath the internal links.



Here is the code for the 'add to cart' button:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" style="vertical-align: bottom" src="images/store/addtobasket.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
<img alt="Add " border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="owner@address.co.uk" />
<input type="hidden" name="item_name" value="Fairy Weaver puppet set" />
<input type="hidden" name="item_number" value="_0094" />
<input type="hidden" name="amount" value="89.36" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="bn" value="PP-ShopCartBF" />
<label>Fairy Weaver Puppet Set</label>
</form>

This form is floating loose within a <div>. I think the 'border="0"' attributes should be removed, shouldn't they? I already removed them from the 'view cart' form, and I don't think they make a difference in any case.


Thank you.

Helen
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,571
#5: Jan 26 '07

re: PayPal form failing XHTML validation

The /> is a xhtml end tag. Some tags, such as <link> now end like this:
<link href="ursprograms.css" rel="stylesheet" type="text/css" />

Yes, the border attribute should be removed because it does not exist in xhtml.
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#6: Jan 26 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by drhowarddrfine

The /> is a xhtml end tag. Some tags, such as <link> now end like this:
<link href="ursprograms.css" rel="stylesheet" type="text/css" />

Yes, the border attribute should be removed because it does not exist in xhtml.

Can you suggest how I can get the page to validate in XHTML strict? I don't know how to do a form without the <input> tags, and I don't know how I can send it to PayPal without a target attribute.

Thank you.

The validator said:

<form target="paypal"... /> there is no attribute "target"

<input type="hidden" name="cmd" value="_cart" /> document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,571
#7: Jan 26 '07

re: PayPal form failing XHTML validation

Like I said above, the only solution to the 'target' is a javascript one so you might ask about that in the javascript forum. The second part can be solved by just adding a div tag before the first <input> tag and closing the div after the last input tag. This is what the validator is complaining about.
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#8: Jan 26 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by drhowarddrfine

Like I said above, the only solution to the 'target' is a javascript one so you might ask about that in the javascript forum. The second part can be solved by just adding a div tag before the first <input> tag and closing the div after the last input tag. This is what the validator is complaining about.

Ah, thank you. I will try that, although at present the form is a list item in a side menu, but I will have another think and see whether I can work around that.

I will try the Javascript forum.

Thanks again.

Helen
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#9: Jan 26 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by wavedancer

Ah, thank you. I will try that, although at present the form is a list item in a side menu, but I will have another think and see whether I can work around that.

I will try the Javascript forum.

Thanks again.

Helen


Well, I put all the <input> content between <p></p> and now it looks better than it did before, so that is a bonus!

Thank you!
Expert
  
Join Date: Oct 2006
Location: NC
Posts: 1,722
#10: Jan 27 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by drhowarddrfine

Like I said above, the only solution to the 'target' is a javascript one so you might ask about that in the javascript forum.

Let us know if you're unsure how to include this:
Expand|Select|Wrap|Line Numbers
  1. function externalLinks() { 
  2.  if (!document.getElementsByTagName) return; 
  3.  var anchors = document.getElementsByTagName("a"); 
  4.  for (var i=0; i<anchors.length; i++) { 
  5.    var anchor = anchors[i]; 
  6.    if (anchor.getAttribute("href") && 
  7.        anchor.getAttribute("rel") == "NewWindow") 
  8.      anchor.target = "_blank"; 
  9.  } 
  10. } 
  11. window.onload = externalLinks;
  12.  
HTML - Your anchor tags (links) would then look like this:
[html]
<a href="http://google.com" onclick="window.open(this.href);return false;" rel="NewWindow">Google It!</a>
[/html]

HTH,
Aric
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
#11: Jan 27 '07

re: PayPal form failing XHTML validation

Quote:

Originally Posted by AricC

Let us know if you're unsure how to include this:

Expand|Select|Wrap|Line Numbers
  1. function externalLinks() { 
  2.  if (!document.getElementsByTagName) return; 
  3.  var anchors = document.getElementsByTagName("a"); 
  4.  for (var i=0; i<anchors.length; i++) { 
  5.    var anchor = anchors[i]; 
  6.    if (anchor.getAttribute("href") && 
  7.        anchor.getAttribute("rel") == "NewWindow") 
  8.      anchor.target = "_blank"; 
  9.  } 
  10. } 
  11. window.onload = externalLinks;
  12.  
HTML - Your anchor tags (links) would then look like this:
[html]
<a href="http://google.com" onclick="window.open(this.href);return false;" rel="NewWindow">Google It!</a>
[/html]

HTH,
Aric

Thank you. I'll refresh my rusty memory concerning javascript and see if I can do it. The only concern I have, though, is that people who don't have javascript enabled won't be able to access their shopping cart – or buy anything. Is that the case? If so, is there a <noscript> workaround that I could use, or would that upset the XHTML validator?

Should I be taking this query to the javascript forum or is it OK to discuss it here since it relates to XHTML?
Newbie
  
Join Date: May 2007
Posts: 2
#12: May 14 '07

re: PayPal form failing XHTML validation

Creating Paypal XHTML 1.0 Strict Form that is Pass Validation is simple, there always a bad way and good way..


The Bad Way
Read what line that error then make adjustment to fool the validator.

Example if a code like this, get 10 errors

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Paypal XHTML 1.0 Example Click Form Badway But Pass Validation</title>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
  11. <input type="hidden" name="cmd" value="_xclick" />
  12. <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
  13. <input type="hidden" name="item_name" value="Service Payment" />
  14. <input type="hidden" name="no_shipping" value="1" />
  15. <input type="hidden" name="return" value="./" />
  16. <input type="hidden" name="no_note" value="1" />
  17. <input type="hidden" name="tax" value="0" />
  18. <input type="hidden" name="currency_code" value="USD" />
  19. <input type="image" src="https://www.paypalobjects.com/WEBSCR-460-20070511-1/en_US/i/logo/logo-xclick2.gif" name="submit" alt="Paypal Payment" title="Make payments with PayPal - it's fast, free and secure!" />
  20. </form>
  21.  
  22. </body>
  23. </html>
  24.  
that says
Quote:
ERROR Line 11 column 49: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

....
Read the the report then try to make some adjustment, like putting "div" to as form container.

Expand|Select|Wrap|Line Numbers
  1. <div>
  2. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
  3. ...
  4. ..
  5. <input type="image" src="https://www.paypalobjects.com/WEBSCR-460-20070511-1/en_US/i/logo/logo-xclick2.gif" name="submit" alt="Paypal Payment" title="Make payments with PayPal - it's fast, free and secure!" />
  6. </div>
  7.  
Check again, and now you get 1 error.
Quote:
ERROR Line 20 column 6: end tag for element "form" which is not open.
Damn, how can it says the form tag not open..
Hmnn, if the validator think it dont have "form" start tag, how about if we just remove the "form" end tag (deleting /FORM).

Now, the code look like this
Expand|Select|Wrap|Line Numbers
  1. <div>
  2. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
  3. <input type="hidden" name="cmd" value="_xclick" />
  4. <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
  5. <input type="hidden" name="item_name" value="Service Payment" />
  6. <input type="hidden" name="no_shipping" value="1" />
  7. <input type="hidden" name="return" value="./" />
  8. <input type="hidden" name="no_note" value="1" />
  9. <input type="hidden" name="tax" value="0" />
  10. <input type="hidden" name="currency_code" value="USD" />
  11. <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but02.gif" name="submit" alt="Paypal Payment" title="Make payments with PayPal - it's fast, free and secure!" />
  12. </div>
  13.  
Wow, it passed.. Hehehe, stupid validator..
Don't believe it, see for your self Paypal XHTML 1.0 Test0

The Good Way
For advanced xhtml writer, they will make adjustment something like this
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Paypal XHTML Example Image Click Form</title>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <div id="paypal-form">
  11.   <form id="_xclick" method="post" action="https://www.paypal.com/cgi-bin/webscr" >
  12.     <fieldset>
  13.         <div class="inputform">
  14.             <input type="hidden" name="cmd" value="_xclick" />
  15.             <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
  16.             <input type="hidden" name="item_name" value="Service Payment" />
  17.             <input type="hidden" name="no_shipping" value="1" />
  18.             <input type="hidden" name="return" value="./" />
  19.             <input type="hidden" name="no_note" value="1" />
  20.             <input type="hidden" name="tax" value="0" />
  21.             <input type="hidden" name="currency_code" value="USD" />
  22.             <input type="image" src="http://www.tmk.co.id/images/pay-with-paypal.gif" name="submit" alt="Paypal Payment" title="Make payments with PayPal - it's fast, free and secure!" />
  23.                 </div>
  24.     </fieldset>
  25.   </form>
  26. </div>
  27.  
  28. </body>
  29. </html>
  30.  
Well, it's valid. Test here Paypal XHTML 1.0 Test1

Another example from Paypal website that ported into xhtml code is this
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Paypal XHTML 1.0 Example Form</title>
  6. </head>
  7.  
  8. <body>
  9. <form id="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  10.   <fieldset>
  11.     <div class="form-type">
  12.       <input type="hidden" name="cmd" value="_xclick" />
  13.       <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
  14.       <input type="hidden" name="currency_code" value="USD" />
  15.       <input type="hidden" name="item_name" value="Service" />
  16.       <input type="hidden" name="amount" value="100.00" />
  17.       <table>
  18.         <tr>
  19.           <td>
  20.             <input type="hidden" name="on0" value="Size" />Size
  21.           </td>
  22.           <td>
  23.             <select id="os0" name="os0">
  24.             <option value="Select a Size">Select Service</option>
  25.             <option value="Small">Assembly</option>
  26.             <option value="Medium">C++</option>
  27.             <option value="Large">Hardcore</option>
  28.             </select>
  29.           </td>
  30.         </tr>
  31.         <tr>
  32.           <td>
  33.             <input type="hidden" name="on1" value="Color" maxlength="200" />Color
  34.           </td>
  35.           <td>
  36.             <input type="text" name="os1" />
  37.           </td>
  38.         </tr>
  39.       </table>
  40.       <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" style="border-width: 0px" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
  41.     </div>
  42.   </fieldset>
  43. </form>
  44.  
  45. </body>
  46. </html>
  47.  
Again it's valid, test here Paypal XHTML 1.0 Test1

Conclusion
Either is bad or good, there is always a way to get it right..

Regards,

LvCKyLuKe
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,467 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved