PayPal form failing XHTML validation

**AricC** · Jan 26 '07, 03:49 AM

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

**drhowarddrfine** · Jan 26 '07, 07:08 AM

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.

**wavedancer** · Jan 26 '07, 12:21 PM

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@ad dress.co.uk" />
<input type="hidden" name="item_name " value="Fairy Weaver puppet set" />
<input type="hidden" name="item_numb er" value="_0094" />
<input type="hidden" name="amount" value="89.36" />
<input type="hidden" name="no_shippi ng" 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** · Jan 26 '07, 04:53 PM

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

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

**wavedancer** · Jan 26 '07, 07:54 PM

Originally posted by drhowarddrfine

The /> is a xhtml end tag. Some tags, such as <link> now end like this:
<link href="ursprogra ms.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** · Jan 26 '07, 10:32 PM

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.

**wavedancer** · Jan 26 '07, 11:26 PM

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

**wavedancer** · Jan 26 '07, 11:45 PM

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!

**AricC** · Jan 27 '07, 12:29 AM

Open Window With Javascript In XHTML

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:

Code:

function externalLinks() { 
 if (!document.getElementsByTagName) return; 
 var anchors = document.getElementsByTagName("a"); 
 for (var i=0; i<anchors.length; i++) { 
   var anchor = anchors[i]; 
   if (anchor.getAttribute("href") && 
       anchor.getAttribute("rel") == "NewWindow") 
     anchor.target = "_blank"; 
 } 
} 
window.onload = externalLinks;

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

**wavedancer** · Jan 27 '07, 12:16 PM

Originally posted by AricC

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

Code:

function externalLinks() { 
 if (!document.getElementsByTagName) return; 
 var anchors = document.getElementsByTagName("a"); 
 for (var i=0; i<anchors.length; i++) { 
   var anchor = anchors[i]; 
   if (anchor.getAttribute("href") && 
       anchor.getAttribute("rel") == "NewWindow") 
     anchor.target = "_blank"; 
 } 
} 
window.onload = externalLinks;

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?

**lvckyluke** · May 14 '07, 12:39 PM

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

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paypal XHTML 1.0 Example Click Form Badway But Pass Validation</title>
</head>

<body>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="lhariadi@tmk.co.id" />
<input type="hidden" name="item_name" value="Service Payment" />
<input type="hidden" name="no_shipping" value="1" />
<input type="hidden" name="return" value="./" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="tax" value="0" />
<input type="hidden" name="currency_code" value="USD" />
<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!" />
</form>

</body>
</html>

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.

Code:

<div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
...
..
<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!" />
</div>

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

Code:

<div>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="lhariadi@tmk.co.id" />
<input type="hidden" name="item_name" value="Service Payment" />
<input type="hidden" name="no_shipping" value="1" />
<input type="hidden" name="return" value="./" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="tax" value="0" />
<input type="hidden" name="currency_code" value="USD" />
<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!" />
</div>

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

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paypal XHTML Example Image Click Form</title>
</head>

<body>

<div id="paypal-form">
  <form id="_xclick" method="post" action="https://www.paypal.com/cgi-bin/webscr" >
    <fieldset>
        <div class="inputform">
            <input type="hidden" name="cmd" value="_xclick" />
            <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
            <input type="hidden" name="item_name" value="Service Payment" />
            <input type="hidden" name="no_shipping" value="1" />
            <input type="hidden" name="return" value="./" />
            <input type="hidden" name="no_note" value="1" />
            <input type="hidden" name="tax" value="0" />
            <input type="hidden" name="currency_code" value="USD" />
            <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!" />
                </div>
    </fieldset>
  </form>
</div>

</body>
</html>

Well, it's valid. Test here Paypal XHTML 1.0 Test1

Another example from Paypal website that ported into xhtml code is this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paypal XHTML 1.0 Example Form</title>
</head>

<body>
<form id="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <fieldset>
    <div class="form-type">
      <input type="hidden" name="cmd" value="_xclick" />
      <input type="hidden" name="business" value="lhariadi@tmk.co.id" />
      <input type="hidden" name="currency_code" value="USD" />
      <input type="hidden" name="item_name" value="Service" />
      <input type="hidden" name="amount" value="100.00" />
      <table>
        <tr>
          <td>
            <input type="hidden" name="on0" value="Size" />Size
          </td>
          <td>
            <select id="os0" name="os0">
            <option value="Select a Size">Select Service</option>
            <option value="Small">Assembly</option>
            <option value="Medium">C++</option>
            <option value="Large">Hardcore</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" name="on1" value="Color" maxlength="200" />Color
          </td>
          <td>
            <input type="text" name="os1" />
          </td>
        </tr>
      </table>
      <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!" />
    </div>
  </fieldset>
</form>

</body>
</html>

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

**beaconsfield** · Nov 9 '11, 11:25 AM

Thank you LvCKyLuKe. I solved my validation problem according to your explanations.

<a href="http://www.diyetcenter .com/" title="diyet,di yet listesi, zayıflama">Diye tCenter</a>

PayPal form failing XHTML validation

PayPal form failing XHTML validation

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment