Form Validator : Form Validation « Form Control




<!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"> &lt;&lt; Name<br>

<input type="text" width="30" name="address" style="border:1 solid #000000"> &lt;&lt; Address<br>

<input type="text" width="30" name="age" style="border:1 solid #000000"> &lt;&lt; Age<br>

<input type="text" width="30" name="zip" style="border:1 solid #000000"> &lt;&lt; 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

   [email protected] */

/* 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">&#169 2002 Premshree Pillai. All rights reserved.</a>

</font>

</td></tr></table>



</body>

</html>
Form Validator : Form Validation « Form Control « JavaScript DHTML
