Webocreation

Wednesday, February 3, 2010

form validation using javascript

<html>
<head>
<title>Untitled Page</title>

<script type="text/javascript">
<!--

function BatchValidation()
{
var validationMessage="";
if(document.form1.txtFName.value=="")
{
validationMessage+="\n First Name is the required field!";
}
if(document.form1.txtLName.value=="")
{
validationMessage+="\n Last Name is the required field!";
}
if(!IsCorrectEmailFormat(document.form1.txtEmail.value))
{
validationMessage+="\n Email address is not valid format!";
}

if(isNaN(document.form1.txtPhoneNo.value))
{
validationMessage+="\n Phone number is number!";
}
if(isNaN(document.form1.txtMobileNo.value))
{
validationMessage+="\n Mobile number is number!";
}
if(validationMessage.length>0)
{
alert(validationMessage);
return false;
}
else
{
return true;
}
}

function IsCorrectEmailFormat(strEmail)
{
var at="@"
var dot="."
var atPos=strEmail.indexOf(at)
var lstr=strEmail.length
var dotPos=strEmail.indexOf(dot)

if (atPos==-1 || atPos==0 || atPos==lstr){
return false
}
if (dotPos==-1 || dotPos==0 || dotPos==lstr){
return false
}

if (strEmail.indexOf(at,(atPos+1))!=-1){
return false
}
if (strEmail.substring(atPos+1,atPos+2)==dot){
return false
}

if (strEmail.indexOf(dot,(atPos+2))==-1){
return false
}

if (strEmail.indexOf(" ")!=-1){
return false
}
if(dotPos<atPos)
{
return false;
}
return true
}

function CheckRequiredField(strFieldName,tag)
{
if(tag.value=="")
{
ErrorMessage.innerHTML=strFieldName + " is Required field!";
}
}

function RealTimeEmailValidation(strEmail)
{
if(strEmail.toString().length>0)
{
if(!IsCorrectEmailFormat(strEmail))
{
ErrorMessage.innerHTML="Email is not in correct format!";
}
}
}

function RealTimeNumberValidation(num)
{
if(isNaN(num))
{
ErrorMessage.innerHTML="Phone no is number!";
}
}

function NumberOnly(aTexField,e)
{
var keyCode = window.event? window.event.keyCode : e.which;
if(keyCode>47 && keyCode<58)
{
}
else
{
window.setTimeout("RemoveLastChar('"+aTexField.id+"')",100);
}
}
function RemoveLastChar(aTextFieldID)
{
var aTextField=document.getElementById(aTextFieldID);
var val=aTextField.value.toString();
var len=val.length;
val=val.substring(0,len-1);
aTextField.value=val;
}

function IsEmpty(aTextField) {
if ((aTextField.value.length==0) ||
(aTextField.value==null)) {
return true;
}
else
{
return false;
}
}

function IsValidEmail(aTextField)
{
var emailRegxp = /^[a-zA-Z\.][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/
if(emailRegxp.test(aTextField.value)!=true)
{
return false;
}
else
{
return true;
}

}
// -->
</script>

</head>
<body>
<form id="form1" name="form1" onsubmit="return BatchValidation();">
<table>
<tr>
<td>
First Name:
</td>
<td>
<input type="text" name="txtFName" id="txtFName" onblur="CheckRequiredField('First Name',this);" />
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<input type="text" name="txtLName" id="txtLName" onblur="CheckRequiredField('Last Name',this);" />
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<input type="text" name="txtAddress" id="txtAddress" />
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="txtEmail" id="txtEmail" onblur="RealTimeEmailValidation(this.value);" />
</td>
</tr>
<tr>
<td>
Phone No:
</td>
<td>
<input type="text" name="txtPhoneNo" id="txtPhoneNo" onblur="RealTimeNumberValidation(this.value)"/>
</td>
</tr>
<tr>
<td>
Mobile No:
</td>
<td>
<input type="text" name="txtMobileNo" id="txtMobileNo" onkeydown="NumberOnly(this,event)" />
</td>
</tr>
<tr>
<td colspan="2"><span id="ErrorMessage" style="color:Red;"></span></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Save" /> <input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</body>
</html>

No comments:

Post a Comment