Form Validator
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Form Validator</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:30pt; color:#CC0000; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">
<center><span class="header">Form Validator</span></center>
<center><br>
<!--------------------------------------BEGIN REQUIRED----------------------------------------->
<!--BEGIN THE FORM-->
<table style="border:3 solid #CC0000" bgcolor="#EFEFEF"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
<form name="main" method="get" action="http://www.YourServer.com/cgi-bin/SomeCgiFile.cgi">
<input type="text" width="30" name="name" style="border:1 solid #000000"> << Name<br>
<input type="text" width="30" name="address" style="border:1 solid #000000"> << Address<br>
<input type="text" width="30" name="age" style="border:1 solid #000000"> << Age<br>
<input type="text" width="30" name="zip" style="border:1 solid #000000"> << Zip<br><br>
<center><input type="button" value="Submit" onClick="javascript:validate();" style="border:1 solid #000000; cursor:pointer; cursor:hand; width:120"> <input type="reset" style="border:1 solid #000000; cursor:hand; cursor:pointer; width:120"></center>
</form>
</font>
</td></tr></table>
<!--END THE FORM-->
<!--BEGIN FORM VALIDATION SCRIPT-->
<script language="JavaScript1.2">
/* Written by Premshree Pillai
Created 2:22 PM 5/12/02
http://www.qiksearch.com
premshree@hotmail.com */
/* Visit http://www.qiksearch.com/javascripts.htm for FREE scripts */
/* Location of script : http://www.qiksearch.com/javascripts/form-validator.htm */
var alphaChars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ";
var numChars="0123456789";
var error;
var error_n;
var error_ad;
var error_a;
var error_z;
var errormsg;
//--------------------------Customise-------------------------------
var isNameReq=true; // True if Name field required else False
var isAddressReq=true; // True if Address field required else False
var isAgeReq=false; // True if Name Age required else False
var isZipReq=true; // True if Name Zip required else False
//------------------------------------------------------------------
function reset_error()
{
error_n=false;
error_ad=false;
error_a=false;
error_z=false;
errormsg='Following Errors Occured ::\n_____________________________\n\n';
}
function validate_name()
{
if(isNameReq)
{
if(document.main.name.value=="")
{
errormsg+='Please enter your Name.\n';
error_n=true;
document.main.name.focus();
}
}
for(var i=0; i<document.main.name.value.length; i++)
{
for(var j=0; j<alphaChars.length; j++)
{
if(alphaChars.charAt(j)==document.main.name.value.charAt(i))
{
break;
}
else
{
if(j==(alphaChars.length-1))
{
errormsg+='"' + document.main.name.value.charAt(i) + '"' + ' is an invalid character for Name.\n';
error_n=true;
}
}
if(error_n)
{
document.main.name.select();
}
}
}
}
function validate_address()
{
if(isAddressReq)
{
if(document.main.address.value=="")
{
errormsg+='Please enter your Address.\n';
error_ad=true;
if(!error_n)
{
document.main.address.focus();
}
}
}
}
function validate_age()
{
if(isAgeReq)
{
if(document.main.age.value=="")
{
errormsg+='Please enter your Age.\n';
error_a=true;
if((!error_n)&&(!error_ad))
{
document.main.age.focus();
}
}
}
for(var i=0; i<document.main.age.value.length; i++)
{
for(var j=0; j<numChars.length; j++)
{
if(numChars.charAt(j)==document.main.age.value.charAt(i))
{
break;
}
else
{
if(j==(numChars.length-1))
{
errormsg+='"' + document.main.age.value.charAt(i) + '"' + ' is an invalid character for Age.\n';
error_a=true;
}
}
if(error_a)
{
if((!error_n)&&(!error_ad))
{
document.main.age.select();
}
}
}
}
}
function validate_zip()
{
if(isZipReq)
{
if(document.main.zip.value=="")
{
errormsg+='Please enter Zip.\n';
error_z=true;
if((!error_n)&&(!error_ad)&&(!error_a))
{
document.main.zip.focus();
}
}
}
for(var i=0; i<document.main.zip.value.length; i++)
{
for(var j=0; j<numChars.length; j++)
{
if(numChars.charAt(j)==document.main.zip.value.charAt(i))
{
break;
}
else
{
if(j==(numChars.length-1))
{
errormsg+='"' + document.main.zip.value.charAt(i) + '"' + ' is an invalid character for Zip.\n';
error_z=true;
}
}
if(error_z)
{
if((!error_n)&&(!error_ad)&&(!error_a))
{
document.main.zip.select();
}
}
}
}
}
function validate()
{
reset_error();
validate_name();
validate_address();
validate_age();
validate_zip();
if(error_n||error_ad||error_a||error_z)
{
error=true;
}
else
{
error=false;
}
if(!error)
{
document.main.submit();
}
else
{
alert(errormsg);
}
}
</script>
<!--END FORM VALIDATION SCRIPT-->
<!--------------------------------------END REQUIRED------------------------------------------->
</center><br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript Form validator. When you submit the form, it validates the data you entered in the various fields.
<br><br>You are allowed to enter only alphabetical characters in the "Name" field. You can enter only numerical data in the "Age" and "Zip" fields.
<br><br>You can also choose which fields are "required" by the user to be filled.
<hr style="color:#CC0000; height:1px; width:100%">
<a href="http://www.qiksearch.com" class="link">© 2002 Premshree Pillai. All rights reserved.</a>
</font>
</td></tr></table>
</body>
</html>
Related examples in the same category