JavaScript Form Validation methods
As there is always a need for client side validation with Website design I thought I would discuss a few different implementation methods that may help with the process. JavaScript is always a popular choice for this, and contains generally all validation that we need for simple forms. These days JavaScript validation logic has been extended by allowing the server to help with some realtime validation using AJAX which allows us to do more complex checks, like checking the username exists on the server before submitting etc. For the moment this article will discuss the implementation of form validation methods, and I will provide some examples in the future.
As a note, we must always assume that JavaScript can be disabled on a clients browser. This typically has occured since people have been afraid of JavaScript exploits for MS IE, popup windows and the such. Hopefully since WinXPSP2 (I am yet to check) is whether people are feeling more confident leaving JavaScript on. So, because of this, we must always allow our form to operate without requiring the use of a custom JavaScript submit function. More importantly we should always remember that client side validation does not substitute server side validation and it must always be performed. Client side validation will make your forms feel more reponsive to the user as simple errors can a majority of the time be ruled out with simple JavaScript checks.
For us to make use of form validation correctly, we must first code up our form with a submit button. We then can use various event listenner/triggers that occur during our client entering form values to call JavaScript validation methods. Most popular events that we can use is the onsubmit(); and onchange();. You can read more about intrinsic events on W3C here to see what additional events occur for HTML elements.
Onsubmit
This method is used as a sort of hook allowing us to call validation or logic checks prior to the form being submited to its action. It allows you to call a function which can return either a true or false state, allowing you to specify whether to submit the form or not.
If you are using Macromedia Dreamweaver and are looking for some basic quick validation (mandatory fields, email address/number validation, minimum length and the such) you can use their Validate Form behaviour (by selecting ‘window -> behaviours’ then selecting your form [has to be selected to work correctly] and selecting add behaviour -> validate form on the behaviours window). For our explanation, it places a generic ‘all in one’ JavaScript validation method in your header that allows it to accept many parameters and rules. The function is called using the onsubmit function tied onto the form element. The function processes, displaying an error message and then sets a document variable which returns true or false. This is great for very quick validation, but lacks largely in the logic you can perform, you can’t do a particular check based on a selection of the form elements.
From here you may choose to extend the form validation and write your own method, allowing you to compose your own onsubmit function and implement your own extended logic/error messages. Your function either needs to return true/false (which in turn is returned from the onsubmit call, e.g. onsubmit=”javascript:return myOnsubmit();”). This opens up many different ways of handling form validation, but also now means that we potentially have to start considering non-reusability etc.
To help validate your form, you should try and collect a number of validation methods for particular purposes, such as checking for required fields, checking email address syntax and the like. These can be placed into a single JavaScript script and included onto each form page. You can then make your custom logic checks for the form in a concise form.
Another more advanced way of handling this step is to create your own Validation Class and then generically register validation checks on field elements. For sake of extending the flexibility of your design, you could also allow the register of validation functions that return true/false to extend its capabilities. This would then also contain all standard logic (such as required field checking methods, validation of email addresses etc). Through many declaritive statements you could setup a quick way of performing basic field validation and allowing it to be extended with an additional logic method.
How to handle the error messages becomes an issue, and is one of the great downfalls of the Dreamweaver implementation. How you place in your error message is upto younow that you have written your own class, but here are some different implementation methods; inline javascript, through your declaritive call (assigning to a variable) or using a hidden form field (with a naming convention - that could be checked by your validation method to see if it exists, and if so grab the message from its value). All have pros and cons, most likely the best choice would be variables through your declartive statements.
Onchange
On change event is another event that allows us to register a method that is called if the form value has changed since gaining focus, and is triggered after the element loses focus. We can use this method to immediately provide feedback about the users input as they are filling out the form, prior to hitting the submit button.
Using this method we can do several things, from alerting error messages to changing the elements CSS style from one colour representing valid to invalid etc.
As explained under the onsubmit action, we can use our validation class methods to help validate these fields generically.
