Validation on Submit

When you include a form on one of your web pages, there will usually be one or more fields where you wish to perform some sort of validation before allowing the form to be submitted. This validation may be as simple as ensuring that something is entered in the field or it may be dozens of lines of code checking that something such as an email address is properly formed. You may include calls to Javascript validation routines to validate each of these fields using the onblur method to perform the validation when your visitor leaves the field but this doesn't validate the field if they never accessed the field directly in the first place.

The only way to ensure that all fields are validated before the form is submitted is to attach the validation to the submit button itself. This requires a few simple changes to the coding of your form and the javascript calls associated with it.

The first thing that you will want to do is to name your form. This will make it easier to reference the form from within your javascript. Also if you have more than one form on the page you will need to give each one a different name so that they can each be referenced separately. For example if you decide to name your form myform then the form statement might read as follows:

<form  name="myform" action="email.php" method="post">

The action parameter, as usual, specifies the server side script or page that will process the form data once it has been validated (in this instance the generic PHP form processor that I wrote and use with this site to process all of the forms).

The other change that you need to make is to the submit button to get it to call your validation routine which in turn will submit the form if it is valid rather than submitting the form directly. Your submit button might look like this:

 <input type="submit" value="Submit this form"
onclick="formvalidation(myform);return false;" />

which (provided that the browser has Javascript support) will validate the form and only submit it if it is valid. If the browser does not support Javascript then the form will be submitted without validation. If we want to disable submission in browsers that do not have Javascript enabled then we use an ordinary button calling your validation routine like this:

<input type=" button" name="submitit" value="Submit this form"
onclick="formvalidation(myform)" />

In this instance we don't need the return false on the end of the onclick as there is no subsequent processing that would be performed.

In both instances (assuming Javascript is enabled) the form will not be directly submitted, instead it will call your formvalidation() routine whenever the button is clicked using the mouse or when the button is selected from the keyboard. With type="submit", browsers that do not support Javascript will submit the form directly without validation. With type="button" the button will not function with Javascript disabled and therefore visitors without Javascript will be unable to use your form. Which of these two options that you choose depends on your requirements.

It almost doesn't matter what name you give to this button (if you name it) as in the rare event that you need to, you can reference it by whatever name you give it. I originally gave my button the name submit which worked quite happily with IE5, Netscape 4 and 6, and Opera but unfortunately is the one name that doesn't work with IE6. As a result my forms gave error messages whenever used with IE6 which one of the visitors to my site kindly pointed out so that I could fix the problem which was to change the name of the button to something other than submit.

The reason why this doesn't work with IE6 is that this browser gets confused between the button named submit and the submit method itself which you need to call after having completed the validation of your form. This statement needs to go 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.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow