When a form is submitted the data goes to the server and is processed by the server (perhaps through the use of PHP). If that data then turns out to be invalid in some way you can bounce the user back to the form and tell them to try again. However, you could save some bandwidth and time by letting JavaScript check the form before it is submitted.
Before completion
Although not form validation it is a nice touch to place the cursor in the first field which needs to be completed rather than expecting the user to click on it:
<form id="countrypicker" action="" method="post">
<input type="text" id="countrycode" name="countrycode" />
<input type="submit" />
</form>
<script type="text/javascript">
document.forms.countrypicker.countrycode.focus();
</script>
The single line in the SCRIPT tags goes through the DOM to the field which should get the focus. The FORMS object is a collection of all forms on this page (here just one). COUNTRYPICKER points to the form in question and COUNTRYCODE is the field within that form where the focus goes.
Are all fields completed?
If a user forgets to put data into a required form field this function reminds them to do so:
function verify(){
if(document.forms.countrypicker.countrycode.value==""){
alert("Please enter a three letter code in the field");
return false;
} else {
return true;
}
}
You could add IF statements to check other fields or use an OR in the statement to check them all together.
Place the function inside SCRIPT tags in the HEAD of the Web page. The only change you need to make to the form is to add an onsubmit event:
<form id="countrypicker" action="" method="post" onsubmit="return verify()">
The form submission is suspended while the function runs. The function returns a value of true or false. If the value is true the submission continues. If the value returned is false that tells the browser not to submit the form and the user has chance to fill it in.
Highlighting missed fields
Perhaps more friendly (and normal) is to add the warning to the page itself (highlighting the fields which need to be completed):
function verify(){
if(document.forms.countrypicker.countrycode.value==""){
document.getElementById('labelforcountrycode').style.color='#FF0000';
return false;
} else {
return true;
}
}
For this one to work the fields would need to be labelled and the labels would need IDs.
Redundancy
Making the user enter crucial information twice is fairly common. If you change your password you often have to type it in twice. You could then get JavaScript to check the two fields to see if they are the same. The process would be the same as above but the IF statement would compare the two fields.
Correct data type
You could get JavaScript to check if a number was entered in a quantity field or text in a name field. This can be done with regular expressions or by comparing each character in the field with an acceptable input. The second method means quite a lot of looping but may be easier to understand:
function isNumeric() {
var fieldContents=document.forms[0].number.value;
var acceptableInput='0123456789';
for (i=0;i<fieldContents.length;i++){
var valid=false;
for (j=0;j<acceptableInput.length;j++) {
alert(fieldContents.substr(i,1)+acceptableInput.substr(j,1));
if (fieldContents.substr(i,1)==acceptableInput.substr(j,1)) {
valid=true;
}
}
if (valid==false) {
alert('You were supposed to enter a number!');
return false;
break;
}
}
return true;
}
To try this change the form from above so that the field is called "number" and the onSubmit event is isNumeric().
Disabling fields
Rather than giving error messages after submission it would be posible to diable the SUBMIT button until all of the form is correctly completed. In the SUBMIT field use the attribute DISABLED:
<input type="submit" id="fred" disabled="disabled" />
In JavaScript enable the SUBMIT button inside an IF which checks all of the conditions:
document.getElementById('fred').disabled=false;
Be careful when you use this as a user might not realise why the SUBMIT button is disabled and that it will become enabled once the form is filled in properly. Tell them clearly.
