Validating Common Form Input - Part 1
Published on 25th of September 2008. Copyright Tavs Dokkedahl. Displayed 2934 time(s)How to add validation to a form
For the rest of the tutorial we will be working with the form displayed below
1 <form> 2 Username<br /> 3 <input type=\"text\" name=\"username\" value=\"\" /><br /> 4 Password<br /> 5 <input type=\"password\" name=\"password1\" value=\"\" /><br /> 6 Repeat password<br /> 7 <input type=\"password\" name=\"password1\" value=\"\" /><br /> 8 Name<br /> 9 <input type=\"text\" name=\"name\" value=\"\" /><br /> 10 Address<br /> 11 <input type=\"text\" name=\"address\" value=\"\" /><br /> 12 Phone<br /> 13 <input type=\"text\" name=\"phone\" value=\"\" /><br /> 14 Email<br /> 15 <input type=\"text\" name=\"email\" value=\"\" /><br /> 16 Website<br /> 17 <input type=\"text\" name=\"website\" value=\"\" /><br /> 18 <input type=\"Submit\" value=\"Submit\" /> 19 </form>
Making the form validate
When the submit button is pressed the form content is send to the server. Just before the data is sent the onsubmit event is fired. We use the onsubmit event to designate which function should be executed prior to submission.
1 <form onsubmit=\"return validate(this);\">
2 ...
3 </form>
By specifying the onsubmit attribute of the form tag the validate function is executed before the actual submission.
If the validate function returns true the form is submitted. If it returns false it is not submitted. When assigning the validate function inline you must specify the return keyword before the validate function - otherwise the function will always submit no matter what the validate function returns.
When passing this as an argument to the validate function this takes on the value of the form element itself.
A simple validate function could look like
1 function validate(form) { 2 // If no value in Username input field 3 if(!form.elements.username.value) 4 return false; 5 else 6 return true; 7 }
When the submit button is pressed the validate function will check if a value is entered into the Username input field. If no value it will return false preventing the form from being submitted. If anything is entered true is returned and the form is submitted.
Every form object has a collection elements which is an array like structure holding all the input objects within the form. So form.elements.username is the input object with a name attribute of "username"and form.elements.username.value is the content og the Username input field.
The elements are also numerically indexed so you can loop over the collection using a for loop
1 function validate(form) { 2 // For every input field in the form 3 for(var i=0; i<form.elements.length; i++) { 4 // If the input field is empty 5 if(!form.elements[i].value) 6 return false; 7 } 8 return true; 9 }
The above example will check all the input fields in the form. The form.elements[0] is the first input field - the Username field. form.elements[1] is the first password field and so on. If any of the input fields are empty false is returned. If all fields have a value true is returned and the form is submitted.
In the following sections we will work our way through validating each field for several different types of input.
| Part 2 » |
