Sunday, June 3, 2012

Simple and effective form validation using Javascript

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.

No comments:

Post a Comment