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

PayPal form failing XHTML validation

  #1  
Old January 25th, 2007, 11:34 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16
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
  #2  
Old January 26th, 2007, 03:49 AM
Expert
  
Join Date: Oct 2006
Location: NC
Posts: 1,723

re: PayPal form failing XHTML validation

Post the whole paypal code here so we can run it through the validator.
  #3  
Old January 26th, 2007, 07:08 AM
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,520

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.
  #4  
Old January 26th, 2007, 12:21 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16

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
  #5  
Old January 26th, 2007, 04:53 PM
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,520

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.
  #6  
Old January 26th, 2007, 07:54 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16

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.
  #7  
Old January 26th, 2007, 10:32 PM
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,520

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.
  #8  
Old January 26th, 2007, 11:26 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16

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
  #9  
Old January 26th, 2007, 11:45 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16

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!
  #10  
Old January 27th, 2007, 12:29 AM
Expert
  
Join Date: Oct 2006
Location: NC
Posts: 1,723

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
Last edited by AricC; January 27th, 2007 at 01:43 AM. Reason: I didn't think the post was clear enough
  #11  
Old January 27th, 2007, 12:16 PM
Newbie
  
Join Date: Jan 2007
Location: Cornwall, UK
Posts: 16

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?
  #12  
Old May 14th, 2007, 01:39 PM
Newbie
  
Join Date: May 2007
Posts: 2

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 »

/bytes/development

/bytes/it

/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 225,662 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