FORM VALIDATION

JavaScript is a strong tool for validating forms before sending the content.
The most obvious things to check for are whether an email address has valid syntax, or if fields meant for values have text entered, etc.

This page covers the 4 most important techniques.

Consider this form:

Note:
The form is not activated - Try entering values to see what happens.

THE TECHNIQUE

The JavaScript to validate inputs to a form consists of four different functions:

emailvalidation will check to see if a value lives up to the general syntax of an email.
valuevalidation will check to see if a value is within a certain interval.
digitvalidation will check to see if a value consits of a certain number of digits.
emptyvalidation will check to see if a field is empty or not.

The validation can take place as the visitor enters values, or all at once upon clicking the submit button after entering the values.

Each validation function can easily be customized to fit the needs of the fields they are checking.

THE CODE

The script explained on this page actually consists of the four functions listed below:

emailvalidation(this,text)
valuevalidation(this,min,max,text,type)
digitvalidation(this,min,max,text,type)
emptyvalidation(this,text)

You can either validate each field whenever it is changed or you can validate all fields at one time when the submit button is clicked.

At the last half of this page you can learn how to use either of these methods along with the scripts.

First, let's look at the different validation scripts.

emailvalidation(this,text)

Checking if the content has the general syntax of an email.
Optional parameters are:
text--text that will show in an alertbox if content is illegal.

valuevalidation(this,min,max,text,type)

Checking if the content is a number in a limited area.
Optional parameters are:
min --minimum value allowed in the field.
max --maximum value allowed in the field.
text --text that will show in an alertbox if content is illegal.
type --enter "I" if only integers are allowed.

digitvalidation(this,min,max,text,type)

Checking if the content has a certain number of digits.
Optional parameters are:
min --minimum number of digits allowed in the field.
max --maximum number of digits allowed in the field.
text --text that will show in an alertbox if content is illegal.
type --enter "I" if only integers are allowed.

function digitvalidation(entered, min, max, alertbox, datatype)
{

with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i")
{checkvalue=parseInt(value); if (value.indexOf(".")!=-1) {checkvalue=checkvalue+1}};
}
if ((parseFloat(min)==min && value.length<min) || (parseFloat(max)==max && value.length>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

emptyvalidation(this,text)

Checking if the field is empty.
Optional parameters are:
text --text that will show in an alertbox if content is illegal.

function emptyvalidation(entered, alertbox)
{

with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

Note:
All functions require this to be entered as a parameter.
Simply enter the word "this" as a parameter when calling one of the functions. This will pass the content of the current field to the function.

If text is not entered when you call the function, it will not launch a popup box if an error is detected.
However, the function will still return the value "false".
This option is used when we check for several possible errors at one time. That is: when all fields are checked once the submit button is clicked.

USING THE VALIDATION SCRIPTS

There are two different ways to call these functions.

One is used when you want to check the field immediately after an input is made to it.

The other is when you want to check all fields at one time, when the user clicks the submit button.

onChange Validation:
To force the browser to check each field immediately, we add an onChange to each of the <input> tags in the form.

For example: if we wanted to check if the value of a certain text field had a valid e-mail address we would add this:

<input type="text" name="Email" size="20" onChange="emailvalidation(this,'The E-mail is not valid');">

onSubmit Validation
You might prefer to check all fields at one time when the user hits the submit button.
To do this you should add an onSubmit event handler to the <form>tag.

If, for example you have a form called "myform" and you want all fields checked when the user clicks 'submit' you should create a function that checks all the fields.

This function should then be called by an onSubmit-event added to the <form> tag.

If this function was called "formvalidation()" the <form> tag would look like this:

<form onsubmit="return formvalidation(this)">

The function that checks the entire form will either return a value of false or true. If it's true the form will be submitted - if it's false the submission will be cancelled.

A script that checks all fields in a form could look like this:

function formvalidation(thisform)

This function checks the entire form before it is submitted.

Note:
The above function works in addition to the four functions listed at the top of this page.
Furthermore, the function needs to be customized to fit your form.

You will need to enter the appropriate form field names used on your own form. (Instead of "E-mail", "Value", "Digits" and "Whatever" in this example).

Furthermore you would need to call the appropriate functions depending on which check you would like to perform on each form field.

(In the example each field is checked by a different function. You could as well have each field checked by the same function. If for example the form had 4 fields that should all contain an e-mail address you would add an emailvalidation to each. )

Click here to see a sample page using this script.

THE ENTIRE SCRIPT
If you want to use all four validation scripts and the script that will check all fields at once, feel free to copy the entire code listed below to your page.

Note:
The function called formvalidation() needs to be customized to fit your own form.

with (entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}
}

function valuevalidation(entered, min, max, alertbox, datatype)
{

with (entered)
{
checkvalue=parseFloat(value);
if (datatype)
{smalldatatype=datatype.toLowerCase();
if (smalldatatype.charAt(0)=="i") {checkvalue=parseInt(value)};
}
if ((parseFloat(min)==min && checkvalue<min) || (parseFloat(max)==max && checkvalue>max) || value!=checkvalue)
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

function digitvalidation(entered, min, max, alertbox, datatype)
{

with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

function formvalidation(thisform)
{
// This function checks the entire form before it is submitted
// Note: This function needs to be customized to fit your form

with (thisform)
{
if (emailvalidation(Email,"Illegal E-mail")==false) {Email.focus(); return false;};
if (valuevalidation(Value,0,5,"Value MUST be in the range 0-5")==false) {Value.focus(); return false;};
if (digitvalidation(Digits,3,4,"You MUST enter 3 or 4 integer digits","I")==false) {Digits.focus(); return false;};
if (emptyvalidation(Whatever,"The textfield is empty")==false) {Whatever.focus(); return false;};
}
}
</script>

EMAIL:
VALUE (0-5):
VALUE (Integer, 3-4 digits):
Do not leave this field empty: