<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
H1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 22px;
color : #000066;
}
H2 {
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
color : #000066;
}
H3 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000066;
}
BODY {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
}
TD,P,A {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
}
A:HOVER {
text-decoration : none;
}
B {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
font-weight : bold;
color : #000066;
}
.Legal {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
}
B.menusection {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000066;
}
A.header {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 9px;
}
A.articleheader {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 9px;
}
A:HOVER.articleheader {
text-decoration : none;
}
HR.articlebodydivider {
color : #0066FF;
}
H1.articlehead {
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
font-weight : bold;
color:#660000;
background-color : #FFFFFF;
}
CODE {
font-family : Courier,monospace;font-size: 10pt;color : #800000;
}
CODE.htm {
font-family : "Courier New", Courier, monospace; font-size : x-small; color : #000080;
}
CODE.comment {
font-family : "Courier New", Courier, monospace;
font-size : x-small;
color : Gray;
}
.testimonial{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 13px;
}
.formItemNameM{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #330000;
text-align: right;
}
.formItemName {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
font-weight : bold;
color : #000066;
text-align: right;
}
.Error {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
font-weight : bold;
color : #990000;
}
.projected {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #600000;
}
.projectedx {
font-weight : bold;
color : #600000;
}
.projectedxx {
font-weight : bold;
color : #600000;
background-color : #FFFF99;
}
.SmallNote {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000099;
}
B.SiteMapHead1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
color : #000066;
}
B.SiteMapHead2 {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000066;
}
</style>
<script type="text/javascript">
function Validator(frmname)
{
this.formobj=document.forms[frmname];
if(!this.formobj)
{
alert("BUG: couldnot get Form object "+frmname);
return;
}
if(this.formobj.onsubmit)
{
this.formobj.old_onsubmit = this.formobj.onsubmit;
this.formobj.onsubmit=null;
}
else
{
this.formobj.old_onsubmit = null;
}
this.formobj.onsubmit=form_submit_handler;
this.addValidation = add_validation;
this.setAddnlValidationFunction=set_addnl_vfunction;
this.clearAllValidations = clear_all_validations;
}
function set_addnl_vfunction(functionname)
{
this.formobj.addnlvalidation = functionname;
}
function clear_all_validations()
{
for(var itr=0;itr < this.formobj.elements.length;itr++)
{
this.formobj.elements[itr].validationset = null;
}
}
function form_submit_handler()
{
for(var itr=0;itr < this.elements.length;itr++)
{
if(this.elements[itr].validationset &&
!this.elements[itr].validationset.validate())
{
return false;
}
}
if(this.addnlvalidation)
{
str =" var ret = "+this.addnlvalidation+"()";
eval(str);
if(!ret) return ret;
}
return true;
}
function add_validation(itemname,descriptor,errstr)
{
if(!this.formobj)
{
alert("BUG: the form object is not set properly");
return;
}//if
var itemobj = this.formobj[itemname];
if(!itemobj)
{
alert("BUG: Couldnot get the input object named: "+itemname);
return;
}
if(!itemobj.validationset)
{
itemobj.validationset = new ValidationSet(itemobj);
}
itemobj.validationset.add(descriptor,errstr);
}
function ValidationDesc(inputitem,desc,error)
{
this.desc=desc;
this.error=error;
this.itemobj = inputitem;
this.validate=vdesc_validate;
}
function vdesc_validate()
{
if(!V2validateData(this.desc,this.itemobj,this.error))
{
this.itemobj.focus();
return false;
}
return true;
}
function ValidationSet(inputitem)
{
this.vSet=new Array();
this.add= add_validationdesc;
this.validate= vset_validate;
this.itemobj = inputitem;
}
function add_validationdesc(desc,error)
{
this.vSet[this.vSet.length]=
new ValidationDesc(this.itemobj,desc,error);
}
function vset_validate()
{
for(var itr=0;itr<this.vSet.length;itr++)
{
if(!this.vSet[itr].validate())
{
return false;
}
}
return true;
}
function validateEmailv2(email)
{
// a very simple email validation checking.
// you can add more complex email checking if it helps
var splitted = email.match("^(.+)@(.+)$");
if(splitted == null) return false;
if(splitted[1] != null )
{
var regexp_user=/^\"?[\w-_\.]*\"?$/;
if(splitted[1].match(regexp_user) == null) return false;
}
if(splitted[2] != null)
{
var regexp_domain=/^[\w-\.]*\.[A-Za-z]{2,4}$/;
if(splitted[2].match(regexp_domain) == null)
{
var regexp_ip =/^\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\]$/;
if(splitted[2].match(regexp_ip) == null) return false;
}// if
return true;
}
return false;
}
function V2validateData(strValidateStr,objValue,strError)
{
var epos = strValidateStr.search("=");
var command = "";
var cmdvalue = "";
if(epos >= 0)
{
command = strValidateStr.substring(0,epos);
cmdvalue = strValidateStr.substr(epos+1);
}
else
{
command = strValidateStr;
}
switch(command)
{
case "req":
case "required":
{
if(eval(objValue.value.length) == 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : Required Field";
}//if
alert(strError);
return false;
}//if
break;
}//case required
case "maxlength":
case "maxlen":
{
if(eval(objValue.value.length) > eval(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : "+cmdvalue+" characters maximum ";
}//if
alert(strError + "\n[Current length = " + objValue.value.length + " ]");
return false;
}//if
break;
}//case maxlen
case "minlength":
case "minlen":
{
if(eval(objValue.value.length) < eval(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : " + cmdvalue + " characters minimum ";
}//if
alert(strError + "\n[Current length = " + objValue.value.length + " ]");
return false;
}//if
break;
}//case minlen
case "alnum":
case "alphanumeric":
{
var charpos = objValue.value.search("[^A-Za-z0-9]");
if(objValue.value.length > 0 && charpos >= 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Only alpha-numeric characters allowed ";
}//if
alert(strError + "\n [Error character position " + eval(charpos+1)+"]");
return false;
}//if
break;
}//case alphanumeric
case "num":
case "numeric":
{
var charpos = objValue.value.search("[^0-9]");
if(objValue.value.length > 0 && charpos >= 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Only digits allowed ";
}//if
alert(strError + "\n [Error character position " + eval(charpos+1)+"]");
return false;
}//if
break;
}//numeric
case "alphabetic":
case "alpha":
{
var charpos = objValue.value.search("[^A-Za-z]");
if(objValue.value.length > 0 && charpos >= 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Only alphabetic characters allowed ";
}//if
alert(strError + "\n [Error character position " + eval(charpos+1)+"]");
return false;
}//if
break;
}//alpha
case "alnumhyphen":
{
var charpos = objValue.value.search("[^A-Za-z0-9\-_]");
if(objValue.value.length > 0 && charpos >= 0)
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": characters allowed are A-Z,a-z,0-9,- and _";
}//if
alert(strError + "\n [Error character position " + eval(charpos+1)+"]");
return false;
}//if
break;
}
case "email":
{
if(!validateEmailv2(objValue.value))
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Enter a valid Email address ";
}//if
alert(strError);
return false;
}//if
break;
}//case email
case "lt":
case "lessthan":
{
if(isNaN(objValue.value))
{
alert(objValue.name+": Should be a number ");
return false;
}//if
if(eval(objValue.value) >= eval(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : value should be less than "+ cmdvalue;
}//if
alert(strError);
return false;
}//if
break;
}//case lessthan
case "gt":
case "greaterthan":
{
if(isNaN(objValue.value))
{
alert(objValue.name+": Should be a number ");
return false;
}//if
if(eval(objValue.value) <= eval(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name + " : value should be greater than "+ cmdvalue;
}//if
alert(strError);
return false;
}//if
break;
}//case greaterthan
case "regexp":
{
if(!objValue.value.match(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Invalid characters found ";
}//if
alert(strError);
return false;
}//if
break;
}//case regexp
case "dontselect":
{
if(objValue.selectedIndex == null)
{
alert("BUG: dontselect command for non-select Item");
return false;
}
if(objValue.selectedIndex == eval(cmdvalue))
{
if(!strError || strError.length ==0)
{
strError = objValue.name+": Please Select one option ";
}//if
alert(strError);
return false;
}
break;
}//case dontselect
}//switch
return true;
}
</script>
</head>
<body>
<form action="" name="myform" >
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">First Name</td>
<td><input type="text" name="FirstName"></td>
</tr>
<tr>
<td align="right">Last Name</td>
<td><input type="text" name="LastName"></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="Email"></td>
</tr>
<tr>
<td align="right">Phone</td>
<td><input type="text" name="Phone"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><textarea cols="20" rows="5" name="Address"></textarea></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<SELECT name="Country">
<option value="" selected>[choose yours]
<option value="008">Albania
<option value="012">Algeria
<option value="016">American Samoa
<option value="020">Andorra
<option value="024">Angola
<option value="660">Anguilla
<option value="010">Antarctica
<option value="028">Antigua And Barbuda
<option value="032">Argentina
<option value="051">Armenia
<option value="533">Aruba
</SELECT>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20",
"Max length for FirstName is 20");
frmvalidator.addValidation("FirstName","alpha");
frmvalidator.addValidation("LastName","req");
frmvalidator.addValidation("LastName","maxlen=20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
frmvalidator.addValidation("Phone","maxlen=50");
frmvalidator.addValidation("Phone","numeric");
frmvalidator.addValidation("Address","maxlen=50");
frmvalidator.addValidation("Country","dontselect=0");
</script>
<P>
Back to article:<br>
<a href="javascript-form-validation.phtml">JavaScript Form Validations Made Easy!</a>
</P>
</body>
</html>