Form Validation in JavaScript
Form Validation using FORM
<html>
<head>
<title>JavaScript Form Validation</title>
<script language=”javascript” type=”text/javascript”>
function frmValidation()
{
if(document.form1.fname.value==”") // checking whether the field fname in form1 has blank value in it or not
{
alert(“First Name cannot be left blank.”);
document.form1.fname.focus(); // this takes the cursor and puts it inside the fname field
return false; // return false prohibits the form submission
}
else if(document.form1.lname.value==”")
{
alert(“Last Name cannot be left blank.”);
document.form1.lname.focus();
return false;
}
else if(document.form1.email.value==”")
{
alert(“Email cannot be left blank.”);
document.form1.email.focus();
return false;
}
else if(document.form1.uname.value==”")
{
alert(“User Name cannot be left blank.”);
document.form1.uname.focus();
return false;
}
else if(document.form1.pword.value==”")
{
alert(“Password cannot be left blank.”);
document.form1.pword.focus();
return false;
}
//defining an expression or format that an email must have
var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!exp.test(document.form1.email.value))
{
alert(“Please enter valid Email Address.”);
document.form1.email.focus();
return false;
}
}
</script>
</head>
<body>
<form name=”form1″ method=”post” action=”">
First Name <input name=”fname” type=”text” id=”fname”> <br>
Last Name <input name=”lname” type=”text” id=”lname”><br>
Email <input name=”email” type=”text” id=”email”><br>
User Name <input name=”uname” type=”text” id=”uname”><br>
Password <input name=”pword” type=”password” id=”pword”> <br><br>
<input type=”submit” name=”Submit” value=”Submit” onClick=”return frmValidation()”>
</form>
</body>
</html>
Form validation by Elements
<html>
<head>
<title>JavaScript Form Validation 2</title>
<script language=”javascript” type=”text/javascript”>
function frmValidation()
{
var i;
for(i=1;i<=5;i++)
{
if(document.getElementById(i).value==”") // checking whether the field with id=1,2,3,4,5 in this page has blank value in it or not
{
alert(“Please fill in the focussed field.”);
document.getElementById(i).focus(); // this takes the cursor and puts it inside the blank focussed field
return false; // return false prohibits the form submission
}
}
//defining an expression or format that an email must have
var exp=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!exp.test(document.getElementById(3).value))
{
alert(“Please enter valid Email Address.”);
document.getElementById(3).focus();
return false;
}
}
</script>
</head>
<body>
<form name=”form1″ method=”post” action=”">
First Name <input name=”fname” type=”text” id=”1″> <br>
Last Name <input name=”lname” type=”text” id=”2″><br>
Email <input name=”email” type=”text” id=”3″><br>
User Name <input name=”uname” type=”text” id=”4″> <br>
Password <input name=”pword” type=”password” id=”5″> <br> <br>
<input type=”submit” name=”Submit” value=”Submit” onClick=”return frmValidation()”>
</form>
</body>
</html>
