469,898 Members | 2,305 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

PayPal form failing XHTML validation

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
Jan 25 '07 #1
12 8838
AricC
1,892 Expert 1GB
Post the whole paypal code here so we can run it through the validator.
Jan 26 '07 #2
drhowarddrfine
7,435 Expert 4TB
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.
Jan 26 '07 #3
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
Jan 26 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Jan 26 '07 #5
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.
Jan 26 '07 #6
drhowarddrfine
7,435 Expert 4TB
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.
Jan 26 '07 #7
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
Jan 26 '07 #8
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!
Jan 26 '07 #9
AricC
1,892 Expert 1GB
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. window.onload = externalLinks;
  11.  
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
Jan 27 '07 #10
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. window.onload = externalLinks;
  11.  
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?
Jan 27 '07 #11
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
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.
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
May 14 '07 #12
Thank you LvCKyLuKe. I solved my validation problem according to your explanations.

<a href="http://www.diyetcenter.com/" title="diyet,diyet listesi, zayıflama">DiyetCenter</a>
Nov 9 '11 #13

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Skippytpe | last post: by
3 posts views Thread by Robert Smith | last post: by
3 posts views Thread by Stephane | last post: by
4 posts views Thread by timothy.pollard | last post: by
5 posts views Thread by kevinmajor1 | last post: by
12 posts views Thread by Geoff Cox | last post: by
3 posts views Thread by arty | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.