Form validation used to occur at the server, after the client had
entered all necessary data and then pressed the Submit button. If some
of the data that had been entered by the client had been in the wrong
form or was simply missing, the server would have to send all the data
back to the client and request that the form be resubmitted with correct
information. This was really a lengthy process and over burdening
server.
JavaScript, provides a way to validate form's data on the client's
computer before sending it to the web server. Form validation generally
performs two functions.
- Basic Validation - First of all, the form must be checked
to make sure data was entered into each form field that required it.
This would need just loop through each field in the form and check for
data.
- Data Format Validation - Secondly, the data that is
entered must be checked for correct form and value. This would need to
put more logic to test correctness of data.
We will take an example to understand the process of validation. Here is the simple form to proceed :
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
|
Basic Form Validation:
First we will show how to do a basic form validation. In the above form we are calling
validate() function to validate data when
onsubmit event is occurring. Following is the implementation of this validate() function:
<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
|
Data Format Validation:
Now we will see how we can validate our entered form data before submitting it to the web server.
This example shows how to validate an entered email address which
means email address must contain at least an @ sign and a dot (.). Also,
the @ must not be the first character of the email address, and the
last dot must at least be one character after the @ sign:
<script type="text/javascript">
<!--
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>
|
Comments
Post a Comment