FORM VALIDATION
Form validation normally
used to occur at the server, after the client had entered all the necessary
data and then pressed the Submit button. If the data entered by a client was
incorrect 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 which used to put a lot of
burden on the 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 all the
mandatory fields are filled in. It would require just a 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. Your code must include appropriate logic to test
correctness of data.
Example
We will take an example to understand the
process of validation. Here is a simple form in html format.
<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>
Output
Basic Form Validation
First let us see how to
do a basic form validation. In the above form, we are calling validate() to validate data when onsubmit event is occurring. The
following code shows 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.
The following example
shows how to validate an entered email address. An email address must contain
at least a ‘@’ 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.
Example
Try the following code for email validation.
<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>
0 comments:
Post a Comment