The object model for HTML forms is a complex structure. It maintains an array, elements[ ], of all input type elements. The elements are not uniform, however. There are submit and reset buttons, text input fields, radio buttons, check boxes, etc., each with a structure of its own. Navigating input fields for validation can be a very frustrating if one doesn't know how address form elements properly.
One method to make this easier, is to check what data is being sent to the validation function before actually starting to write the validation. This is a good strategy in general, not only for validating form data. Always make sure you are passing the correct data to a function!
Here's how to proceed: Set up the function skeleton, that is, just create a function that does nothing. Set up your onsubmit event handler to call the function and pass the form object to it.
(Note: To pass the form object to a function, call the function with an event handler within the <form> tag. The form object can be passed by the Javascript reserved word this, which means 'this object', i.e. the form. Select "View Source" to see an example in this page.)
Now put an alert message as the first statement in your function and give it the form object as a parameter:
alert(form);
(form
is the name of the parameter you have listed in your function definition.) Your alert( ) output should say
[object Form]
Now you're in business. Refine your alert message moving down the object hierarchy until you get the data want:
alert(form.elements); alert(form.elements[0]); alert(form.input_name); alert(form.input_name.name); alert(form.input_name.value); etc.
You may follow the examples given below. Once you have all pieces data you need, start writing the code of your function.
A text field is perhaps the easiest type to validate since there is only one field into which to enter data. The data is the value of the field.
form.elements[n].value
should return the data entered into an input field type text.
If the input field has a name, it's even easier since it can be called by this name instead of the elements[] index:
form.field_name.value
Always name your form and form elements. It will reduce ambiguity and make you life a lot easier.
In XHTML 1.0 Strict, the form element does not allow a name attribute. Use id instead.
Example: Enter some data into the text field below and click the submit button.
Unfortunately, not all input types are that easy to handle. A checkbox, for example, may have one or many options, all of which or none may have been checked. Validation is somewhat more complicated.
Example: Check one or more options of the checkboxes below and click the submit button.
Note: You don't have to send the entire form object to the function. You may just send a field, or even only the value of the field. It depends on the circumstances and what you want to accomplish. We have chosen to use the entire form here in order to show what is contained in the form object and what the data looks like when it is passed to a function.