Hella people !!
You might find this easy !! but i know how hard is this for a beginner to understand how to valiadate the form using java script.
Well if you too like it hard , this article is for you. Lets come directly to the business.
Objective : To validate user registration form in Asp.net through java script.
step 1: Make form like this below through HTML tags. You can use asp.net controls too if you want. the form will appear like this.
Last name:
Gender: Male
Female
Email:
Password:
Phone:
Birth:
Country: -1UsaRussiaAustraliaIndiaUnited KingdomChina
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<script type=”text/javascript”>
//JAVA SCRIPT VALIDATION
function OnSubmitClick() {
var firstname = document.getElementById(‘FirstName’).value;
var namepattern = /^[A-Za-z0-9 ]{3,20}$/;
if (!namepattern.test(firstname))
alert(“enter valid first name”);
else
return true;
var lastname = document.getElementById(‘LastName’).value;
var namepattern2 = /^[A-Za-z0-9 ]{3,20}$/;
if (!namepattern2.test(lastname))
alert(“enter valid first name”);
var sex = document.getElementById(‘Sex’).value;
if (sex == (‘gender_Male’).checked) {
//Male radio button is checked
} else if (sex == (‘gender_Female’).checked) {
//Female is checked
}
var email = document.getElementById(’email’).value;
var emailpattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!emailpattern.test(email))
alert(“enter valid EMAIL ID”);
var password = document.getElementById(‘Password’).value;
if (password.length < 6 && password.length > 20)
alert(“entr password with minimum 6 and maximum 20”);
var phone = document.getElementById(‘Phone’).value;
var telpattern = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
if (!telpattern.test(phone))
alert(“enter valid PHONE NUMBER”);
var birth = document.getElementById(‘Birth’).value; ;
var birthpattern = “”; // /^(0[1-9]|1[012]([- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d+$/;
if (!birthpattern.test(birth))
alert(“enter date in mm/dd/yyyy format”);
var country = document.getElementById(‘Country’).value; ;
if (country == (-1))
return false;
else
return true;
}
{
alert(“Please provide your country!”);
alert(“FORM SUBMIT SUCESSFULLY”);
}
</script>
<style type=”text/css”>
.style1
{
position: absolute;
top: 298px;
left: 99px;
z-index: 1;
}
.style2
{
margin-left: 3px;
}
.style3
{
margin-left: 1px;
}
</style>
</head>
<body>
<form id=”Form” runat=”server”>
<div>
<h3>
Java Script Demo Form Validation
</h3>
First name:
<input id=”Fname” type=”text” name=”Firstname” />
<br />
Last name:
<input id=”Lname” type=”text” name=”Lastname” />
<br />
Gender:
<input id=”Gender male” type=”radio” name=”sex” value=”male” />Male<br />
<input id=”Gender female” type=”radio” name=”sex” value=”female”/>Female<br />
Email:
<input id=” Email” name=”Email” type=”text” />
<br />
Password:
<input id=”Pwd” name=”Password” type=”password” />
<br />
Phone:
<input id=”Phone” name=”Phone” type=”text” />
<br />
Birth: <input id=”DateOfBirth” name=”DateOfBirth”
type=”text” />
<br />
Country:
<select id=”Cntry” name=”Country”>
<option selected=”selected” value=”-1″>-1</option>
<option value=”Usa”>Usa</option>
<option value=”Russia”>Russia</option>
<option value=”Australia”>Australia</option>
<option value=”India”>India</option>
<option value=”United kingdom”>United Kingdom</option>
<option value=”China”>China</option>
</select>
<input id=”Button1″ type=”button” value=”Submit” onclick=”javascript:OnSubmitClick();” />
<br />
<br />
</div>
</form>
<p>
</p>
</body>
</html>
prabhanshu03 