JavaScript : Form Validation 2

Study example form and script and get the hang of it.

When using JavaScript to check a form, the first thing you need is the onsubmit event handler. This event handler specifies a script that is executed when the user submits the form. That script is where you check whether certain fields have a value, whether the user has checked at least one checkbox, and any other checks you deem necessary.

The general syntax is:

<form action="something.pl" onsubmit="return checkscript()">

where checkscript() is the name of the script. This script should return either true or false. If false is returned, the form will not be submitted. If either true or false is returned the script stops.

So the general script becomes something like:

function checkscript() {
if (some value is/is not something) {
// something is wrong
alert('alert user of problem');
return false;
}
else if (another value is/is not something) {
// something else is wrong
alert('alert user of problem');
return false;
}

// If the script makes it to here, everything is OK,
// so you can submit the form

return true;
}

Of course this function can become much more complex if you have to check a complicated form with a lot of radio buttons and things. The general idea remains the same, however: You go through the elements, check whatever you want to check and as soon as you find any mistake, you return false, after which the script stops and the form is not submitted.

Once you've found a mistake, you should notify the user of the problem. This used to be done by an alert, but nowadays you can generate error messages and insert them next to the form field.

Only at the very end of the script, when you have checked all elements and encountered no mistakes, you return true, after which the form is submitted.

Determining values

Of course, the most important thing is to find out what the user has filled in or checked in the form. At other times you might want to fill in something in the form.

Below are snippets of scripts that help you access form elements. All of them are meant to send the user input to the variable user_input. After you've done that, you can check this value for whatever you want.

º Texts, textareas and hidden fields
º Select boxes
º Checkboxes
º Radio buttons

If you'd like to study a practical example, see the example form and script.

Texts, textareas and hidden fields

user_input = document.forms[0].text.value

where text is the name of the text field, textarea or hidden field. The value of this element gives the text, so we transfer it to user_input.

Writing is also possible:

document.forms[0].text.value = 'The new value';

Select boxes

user_input = document.forms[0].select.value;

To change the selected option in a select box, you have to change its selectedIndex, like

document.forms[0].select.selectedIndex = 2;

Now the third option in the box is selected.

Old browsers

In old browsers, select boxes didn't yet have a value property. Back then, this was the way to find the value of a select box:

var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

First, we need to find out which option the user has selected. document.forms[0].select.selectedIndex gives us the number of the selected option. JavaScript has created an array options which contains all options of the select box. So we ask for the selected option in this array and take the value of it, which we transfer to user_input.

Checkboxes

if (document.forms[0].checkbox.checked) {
user_input = document.forms[0].checkbox.name
}

in which checkbox is the name of the checkbox. If the checkbox is checked, we take its name (or its value, if you need that bit of data) and transfer it to user_input.

To check a checkbox, set its property checked to true:

document.forms[0].checkbox.checked = true

Radio buttons

for (i=0;i<document.forms[0].radios.length;i++) {
if (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i].value;
}
}

where radios is the name of the group of radio buttons.

Note that document.forms[0].radios is an array filled with all radio buttons. Loop through all of them and see if it is checked. If one is, transfer the value of that radio button to user_input.

document.forms[0].radios.length gives the number of radio buttons. For each radio button, we see if it is

To check a radio button, set its property checked to true:

document.forms[0].radios[i].checked = true;

Taken From : http://www.quirksmode.org/js/forms.html