Validate on Submit

3. Submit If Valid

Within the function that you call from the submit button you add the same calls to the individual field validations as you added to the onblur and onchange events on the fields themselves. You also need to perform validation of any radio buttons as well as any cross field validations between fields. In each case if the field (or field combination) is not valid you want the function to exit without submitting the form. We do this by exiting the function with a return statement when an invalid condition is found.

Once all of the validations have been performed we then want to submit the form. We do this by adding this statement right at the end of your javascript validation routine after you have completed validating everything and want the form to be submitted:

Provided that your validation routine exits prior to executing this statement if any errors in the input are found (after displaying appropriate error messages of course) then your form will only be submitted once all of the validations are complete which will save you having to handle obviously incomplete information at a later stage in the process (after it is too late to ask your visitor to correct it). If you have several alternate validation options then you may end up with several spots in the code where you have completed validation and want to submit the form. You can insert the submit statement in each spot in the code where it is required.

Of course this validation will only check that they entered something in an appropriate format in each field, the javascript validation will be unable to confirm that the information entered is actually correct. You will still need to check that in the subsequent server side processing or manually after you receive the data submitted in the form.

There is just one more thing that we will want to validate that relates to the submit button itself. We need to validate to make sure that the form is not submitted twice due to delays in the processing of the form and an impatient visitor selecting submit a second time.

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.