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+<(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})>$|^(\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