Question

I have a form which validates that an option is selected using a returned boolean from a function:

<form  id="checkoutForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" name="paypal">

And I was submitting the form with this standard image button:

<input name="submit" type="image"  src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" value="Checkout">

However I’ve been updating and am using a CSS button instead so submit the form as so:

 <a href="javascript:void(0)" style="float:right;" class="shopbutton" onclick="document.forms['checkoutForm'].submit();">Checkout with PayPal</a>

I can just use the standard button like so:

<input name="submit" type="submit"  class="shopbutton" value="Checkout">

But this causes me some other small issues and I’d like to know how to ensure the form validates using the other method?

TIA

Edit: I should also mention that when using the <a href type button that the button is declared outside of the <form> tags.

Answer 1

You are bypassing the onsubmit when directly submitting the form with javascript. This is one example why client-sided validation is bad.

One solution to your problem would be to append your a link like this:

<a href="javascript:void(0)" style="float:right;" class="shopbutton" onclick="validateForm()">Checkout with PayPal</a>

And then just add some error count to the validation function, and submit within the function if no errors were found, like so:

function validateForm() {
    var errors = 0;
    if(inputFieldHere.value.length<3) errors++;
    if(errors) return false; //Or display some error or something
    else document.forms["checkoutForm"].submit();
}