|
|
|
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.
| function emailvalidation(entered, alertbox)
{
// E-mail Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
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;}
}
}
|
|
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.
| function valuevalidation(entered, min, max, alertbox, datatype)
{
// Value Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
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;}
}
}
|
|
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)
{
// Digit Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
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)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
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.
| function formvalidation(thisform)
{
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;};
}
}
|
|
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. )
|
|
|
|
"Better Than Books - As Easy As It Gets!"