Validate PayPal for XHTML1.1

* 3 January, 2004 - Initial offering.

If you have not noticed, the output from the standard PayPal button factory will not validate under XHTML1.1 standards. This will show you how to do it.

By making some minor changes we can get it to validate, and bring PayPal up near current standards. Of great interest is to do it in a way that still works on older browsers, and with PayPal JavaScript which still uses some obsolete tags.

Here is a summary of the changes that are required in XHTML1.1.

A FORM no longer has a target. This is troublesome because PayPal code looks for this value, so we must create it. JavaScript can create objects just about anywhere.
A FORM no longer has a name - it is id now. PayPal does not use the name, but modifications to their code sometimes do. A common solution is to put both name and id in the FORM. The reason this will work is that a browser ignores things it does not understand. name creates a validation error, but you may have to live with it (until browsers stop supporting it).
All statements must now end. This means that there are no more optional or forbidden endings to statements. <option (under a select) must now have </option>. We must be careful, here, for backward compatibility.
All input statements must be enclosed in a containing tag.

Here is a PayPal button that validates under XHTML1.1...

  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" 
    onsubmit="this.target = 'paypal';">
  <p>
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="add" value="1" />
    <input type="hidden" name="business" value="jas22924@aol.com" />
    <input type="hidden" name="item_name" value="test" />
    <input type="hidden" name="amount" value="1" />
    <input type="image" src="cartadd.gif" name="submit" alt="cart add" />
  </p>
  </form>

Discussion

target does not exist under XHTML1.1, but there is nothing to stop us from creating it with JavaScript so the PayPal JS can find it. For older browsers we are just plugging an existing value. This same approach could be used to give a FORM a name under XHTML1.1, if you want.

The " />" is a way to end the input statements, and still work with older browsers. That space character makes it backward compatible. Older browsers wonder what that "/" character is (and some mark it as junk), but it hurts nothing.

All input statements must exist under some enclosing tag. I just used the paragraph tag here.

Example of object creation.

Under XHTML1.1 the name object does not exist for a FORM. But JS may create it (as long as it has write permissions to that section of the Document Object.) Here is some JS that will create a name, and populate it with methods like used to exist under browsers prior to XHTML1.1 level browsers...

  function SetName (obj, nam) {  //create a name for a FORM
    // obj is the this keyword from caller FORM
    // nam is the string name for the FORM
    obj[nam] = new Object ();    // create a new object with name
    obj[nam] = obj;              // fill with own methods
  }

Or, do it like we did target (giving a FORM the name of MyForm)...

  ...
  onsubmit="this.target = 'paypal';      // fill the target
            this.MyForm = new Object (); // create name object
            this.MyForm = this;">        // populate it, w/target!

And that is all there is to it. If an XHTML1.1 FORM has no name, then create an object with that name, and populate it with its own methods. After that code executes, you may refer to the FORM like you did before. The power of JavaScript here is tremendous.

Alert (document.forms.MyForm.target); prints out paypal! Just like before!

Contact me concerning this article at paypalhelper@aol.com. Mention "validate" in your note.