Submitting Forms and Ajax

When you set up the JavaScript validation for your form you will often attach validations to individual fields. You would then call all of the validations again immediately prior to submitting the form (just in case the person filling out the form skipped a field completely and therefore didn't trigger the individual validation. All of the validations and possibly more would then be repeated again on the server so as to cater for any forms filled out where JavaScript either wasn't available or where it was deliberately turned off.

There is nothing wrong with running these validations several times like this. If you only wanted to run the validations once then you'd skip all the JavaScript validations and just run the last validation on the server but doing that would mean that your visitors have to fill out the entire form and submit all the data to the server before any validation is done. That would make for delays in being able to get the form filled out properly if mistakes are made that fail validation and would be annoying to the person filling out the form. Such delays in validation are unavoidable for those without JavaScript but for those with JavaScript available including the JavaScript validations allows more immediate feedback on whether the values entered are valid.

Attaching the validations to the individual fields provides the most immediate feedback on whether what was just typed is valid or not while rerunning all the field validations again prior to submitting the form checks for any overlooked fields and validates them before sending the data to the server.

This process works fine when the validation of a field is completely independent of any other data. Where we want to validate multiple fields to confirm that what they all contain is consistent with each other we can't do individual field validations and will only have the validation prior to submission (plus of course the one on the server). It would make little sense to report a validation error involving two (or more) fields when only the first field has been filled out and the person hasn't got to the other yet.

There is one situation where it is not quite as obvious how to attach the validation and that is where the field needs to be compared to data on the server in order to determine whether it is valid or not. The only way that such validations used to be able to be done was on the server itself after the form was submitted but since ways for JavaScript to call the server and get a response back were introduced it is now possible to at least attempt to validate such fields before the entire form is sent to the server. Basically you set up an individual field validation that sends the value entered to the server and have the server do the validation while your visitor continues to fill out the rest of the form. When the server determines if the field is valid or not it returns a response to the page which can then display an error message if the field is invalid. This would not happen instantly after the person moves to the next field as there would be a delay while the information to do the validation makes its trip to the server and back.

It makes no sense to attach any ajax style field validations to the processing performed immediately prior to the form being submitted. Such validations can only be done as individual field validations. The equivalent validation is already available when the form is submitted by the server side validation as the only difference between that and the individual field validation is that the entire form is sent for server side validation when the form is submitted instead of just the individual field for the ajax call. While an asynchronous server call can be done for the individual validation so that the person can continue filling out the rest of the form while you validate that one field on the server, you would need a synchronous call if you were to repeat the call immediately prior to submission as otherwise the form will have been submitted and the page would no longer exist to accept the response. Since the data is about to be passed to the server anyway when the form is submitted it makes no sense to delay that submission in order to validate individual fields.

The purpose of JavaScript validation is to make things more convenient for the person filling out the form by providing them with feedback on whether what they are entering is valid as early as possible. This means that those fields where you perform individual validation should not have that validation repeated immediately prior to submission where an ajax call is needed. It means that you may have some cross field validations that are first performed immediately prior to submission. It may also mean that you deliberately omit testing complex validations via JavaScript where the data is almost certain to pass that validation. In some instances it makes more sense to only have the server side validation (which has to be there regardless of what JavaScript validation you do or don't include) because the JavaScript code to perform the validation would significantly slow the loading of the page for everyone and almost everyone is going to enter a valid value.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow