Just Try This: expression

The following code uses:

FormValidation.html

<html>
<head>
<title>Consultation Form</title>
<script type=“text/javascript” language=“javascript”>
var regx_name=/^[A-Za-z]{2,30}$/,
 regx_number=/^[0-9]{10}$/,
 regx_mail=/^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+&lt;(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})&gt;$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/;
 window.onload = function()
 {
 //onload delegating event
  var inputTag=document.getElementsByTagName(“input”),
   form=document.getElementById(“getDetails”);
  form.onsubmit=validate;
  for(var i=0;i<inputTag.length;i++)
  {
   inputTag[i].onfocus=clearInfo;
   inputTag[i].onblur=showInfo;
  }
 }
 function showInfo()
 {
  var info=document.getElementById(“info”);
  info.innerHTML="";
  switch(this.name)
  {
   case “firstName”:
    if(!validName(this.value)) this.value=“First Name”;
    break;
   case “lastName”:
    if(!validName(this.value)) this.value=“Last Name”;
    break;
   case “countryCode”:
    break;
   case “mobileNumber”:
    if(!validNumber(this.value)) this.value=“Mobile Number”;
    break;
   case “mailId”:
    if(!validMail(this.value)) this.value=“Mail-ID”;
    break;
   default:
    break;
  }
 }
 function clearInfo()
 {
  var info=document.getElementById(“info”);
  switch(this.value)
  {
   case “First Name”:
   this.value="";
   info.innerHTML=“Enter your firstname.Only alphabets allowed.";
    break;
   case “Last Name”:
    info.innerHTML=“Enter your lastname.Only alphabets allowed.";
    this.value="";
    break;
   case “Mobile Number”:
    info.innerHTML=“Enter your mobile number.It should be 10-digits.";
    this.value="";
    break;
   case “Mail-ID”:
    info.innerHTML=“Enter a valid mail-id.";
    this.value="";
    break;
   default:
    break;
  }
 }

 function validate()
 { 
  var fname=document.getElementById(“firstName”).value,
   lname=document.getElementById(“lastName”).value,
   mnumber=document.getElementById(“mobileNumber”).value,
   mailID=document.getElementById(“mailId”).value;
  if(validName(fname) && validName(lname) && validNumber(mnumber) && validMail(mailID))
   return true;
  return false;
 }
 function validName(name)
 {
  return regx_name.test(name);
 }
 function validNumber(number)
 {
  return regx_number.test(number);
 }
 function validMail(mailID)
 {
  return regx_mail.test(mailID);
 }
</script>
</head>
<body>
<div id=“container”>
 <div id=“info”></div>
 <form name=“getDetails” id=“getDetails” method=“GET” action=“action_here”>
  <input type=“text” name=“firstName” id=“firstName” value=“First Name”/>
  <input type=“text” name=“lastName” id=“lastName” value=“Last Name”/>
  <input type=“text” name=“countryCode” id=“countryCode” disabled=“disabled” value="+91”/>
  <input type=“text” name=“mobileNumber” id=“mobileNumber” value=“Mobile Number”/>
  <input type=“text” name=“mailId” id=“mailId” value=“Mail-ID”/>
  <button>Get my FREE consultation!</button>
 </form>
</div>
</body>
</html>

Screen shot:

Click here for demo.
you can also download source.

regex pattern   /^[A-Za-z]{2,30}$/ find valid name.
     ^       indicates begining of string
     [A-Za-z] it matches only albhabets,A-Z indicates match all capital letters,a-z indicates match all small letters
     {2,30}     indicates minimum string length 2 , maximum string length 30
     $    indicates end of string

regex pattern /^[0-9]{10}$/ find valid mobile number.
^    indicates begining of string
     [0-9]    it matches only numberics,0-9 indicates match all numbers
     {10}    indicates string length should exactly 10
     $    indicates end of string

regex pattern /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+<(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})>$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/ find valid mail address.

Anonymous function called window.onload=function(){}-it delegate clearInfo(),showInfo() to all input tag's onFocus,onblur respectively.
"form.onsubmit=validate;" - it binds validate() with form's onsubmit event.

Just Try This

Sunday, June 3, 2012

Simple and effective form validation using Javascript