Using JavaScript with HTML Forms
Validation Tips and Techniques Using Client Side Programming
Jan 22, 2008
One of the commonest problems that web masters come up against when web programming with forms is that users often neglect to enter the correct information. Client side HTML form validation with JavaScript solves this problem by intercepting the standard browser submit function with a JavaScript submit equivalent.
The JavaScript example in this article illustrates the technique, and shows how to manipulate the JavaScript document model, create a JavaScript popup that alerts the user to the problem, and organize JavaScript code properly in a user defined function. The theory is simple, for those who understand JavaScript already:
- Create a JavaScript validation function in the HTML head section
- Intercept the HTML submit using the JavaScript submit handler (JavaScript onsubmit)
- Return true or false depending on the result of the JavaScript validation function
So, the code is in 2 parts: defined in the HTML document head, and called from the body, through the form's submit button.
The JavaScript Validation Function
Here is the skeleton for the validation function contained in the head of the HTML document:
{
return true;
}
The validation process is very simple - for each error found in the HTML form, the function should return false. If it gets to the end without finding an error, it returns true to indicate that the form is valid.
The JavaScript document model allows us to access individual form elements; the field is contained within the form, which is contained within the document. The fields and forms can be referenced by name. In the examples below, it is assumed that the following form has been constructed:
<input type="text;" name="text_field">
<input type="submit;" value="Submit">
</form>
The important points in the above HTML snippet are:
- Each element, including the form, is named;
- The HTML onsubmit handler has been used to call the JavaScript validation function;
- The submit button handling has not been modified (i.e. no onclick handler).
Assuming that the validation tests to see whether the text_field is empty, the following JavaScript code can be added to the validation function:
{
alert ("Please fill in the text field!");
return false; // Prevent form submit
}
In the above, a JavaScript popup is used to alert the user, using the JavaScript alert function, if the text_field is empty. Next, the function returns false, to prevent the form from being submitted.
Validating Other Fields Using JavaScript Validation
All fields can be validated using the above technique. It is up to the programmer to determine what dependencies there might be between the fields, and validate them accordingly. It is good practice to avoid multiple alerts in the same validation process, which is why the above code returns a value before completing all validations.
Checkboxes can be validated by testing their checked property against true or false:
Drop-down listboxes can be checked in 2 ways - using the selectedIndex property to detect for non-selection of items, or testing to see what item is actually selected:
if ( test_form.listbox_name.options[test_form.listbox_name.selectedIndex].value == "" ) // Empty selection?
Finally, radio buttons can be tested to see if there is one selected, by evaluating each item in the collection using the array of options linked to the set of radio buttons:
if ( test_form.radio_name[1].checked == false ) // Is the second one selected?
etc.
Of course, in this last example, the programmer must be slightly careful to be sure that the correct sense is maintained - false should only be returned if none of the radio buttons are checked.
