Custom PayPal Form with Required Fields

May 18, 2011

Built a custom PayPal form for a client today, and had trouble find resources regarding validating required form fields. In the end, I added some Javascript in the header to check required fields were not left blank as well as check one field was a certain length of characters. In the form code below I used a fake email, be sure to replace it with the receiving PayPal account email.

Javascript (in header):

function validateForm() { var x=document.forms["myPayPal"]["os0"].value if (x==null || x=="") { alert("Please enter a patient account number"); return false; } if (!(x.length == 6)) { alert("Please enter a six digit account number"); return false; } var y=document.forms["myPayPal"]["os1"].value if (y==null || y=="") { alert("Please enter a patient name"); return false; } var z=document.forms["myPayPal"]["amount"].value if (z==null || z=="") { alert("Please enter a payment amount"); return false; } }

Form (in body):

<form name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm"> <input type="hidden" name="item_name" value="Fake PayPal Form"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="business" value="email@fakeemail.com"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="return" value="http://www.fake-web-address.com/success.html"> <input type="hidden" name="on0" value="Patient Account Number">Patient Account Number: <input type="text" name="os0" maxlength="60"> <input type="hidden" name="on1" value="Patient Full Name">Patient Full Name: <input type="text" name="os1" maxlength="60"> Amount:<input name="amount" type="text" id="amount" size="45"> <input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110429-1/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" value="Submit"> </form>

References
http://freelanceswitch.com/money/making-a-paypal-form-tutorial/
http://www.webcheatsheet.com/javascript/form_validation.php
http://www.w3schools.com/js/js_form_validation.asp

If you’ve had success with any other validation methods, or checking for other requirements, please leave a comment!