In this Tutorial we are performing validation on textbox for email and re-type password using Regular Expression with JavaScript. We are performing our task with Eclipse IDE and for user's view we are using JSP.
Project Explorer View:
register.jsp
If we want to write JavaScript on same html page then it must be inside
<head> </head> tag.
for green tick mark we are using green.jpg image which you can see in project explorer view.
If all available text-box conditions are true then on submit button click page will redirect to success.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User Registration page</title>
<script type="text/javascript">
f1=1,f2=1,f22=1;
function checkemail()
{
var email=document.getElementById("email").value;
var element=document.getElementById("label1");
if(email=="")
{ element.innerHTML="Email Id Required!";
element.style.color="red";
document.getElementById("img1").style.visibility='hidden';
document.getElementById("label1").style.visibility='visible';
f1=1;
}
else
{ if(email.search(/^\w+([.-]\w+)*@([A-Za-z0-9\-]){2,12}\.([A-Za-z]{2,4})$/)==-1)
{ element.innerHTML="Not a valid email format. Must be email@host.domain";
element.style.color="red";
document.getElementById("img1").style.visibility='hidden';
document.getElementById("label1").style.visibility='visible';
f1=1;
}
else{
document.getElementById("img1").style.visibility='visible';
document.getElementById("label1").style.visibility='hidden';
f1=0;
}
}
}
function checkpass1()
{
var pass1=document.getElementById("pass1").value;
var pass2=document.getElementById("pass2").value;
var element=document.getElementById("label2");
if(pass1=="")
{element.innerHTML="Password Required!";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f2=1;
}
else
{
if(pass1.length<4||pass1.length>15)
{
element.innerHTML="Password must be 4-15 characters long";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f2=1;
}
else
{document.getElementById("img2").style.visibility='visible';
document.getElementById("label2").style.visibility='hidden';
f2=0;
}
}
if(pass2=="")
{//no f2 set
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
}
else if(pass1!=pass2)
{ element.innerHTML="Password Not Matched!";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f2=1;
}
else
{document.getElementById("img2").style.visibility='visible';
document.getElementById("label2").style.visibility='hidden';
f2=0;
}
}
function checkpass2()
{
var pass1=document.getElementById("pass1").value;
var pass2=document.getElementById("pass2").value;
var element=document.getElementById("label2");
if(pass1==""&&pass2=="")
{ element.innerHTML="Password Required!";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f22=1;
}
else if(pass2.length<4||pass2.length>15)
{
element.innerHTML="Password must be 4-15 characters long";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f22=1;
}
else if(pass1!=pass2)
{ element.innerHTML="Password Not Matched!";
element.style.color="red";
document.getElementById("img2").style.visibility='hidden';
document.getElementById("label2").style.visibility='visible';
f22=1;
}
else
{document.getElementById("img2").style.visibility='visible';
document.getElementById("label2").style.visibility='hidden';
f22=0;
}
}
function validate()
{
if(f1==1||f2==1||f22==1)
{
alert("Complete TextBox Conditions!!");
return false;
}
else
{
return true;
}
}
</script>
</head >
<body bgcolor="black">
<form action="success.jsp" method="post">
<table bgcolor="white" align="center">
<tr>
<td colspan="3"><h1>User Registration</h1></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onblur="checkemail();"></td>
<td><img src="green.jpg" id="img1" style="visibility:hidden"><label id="label1"></label></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass1" onblur="checkpass1();" /></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="pass2" onblur="checkpass2();"/></td>
<td><img src="green.jpg" id="img2" style="visibility:hidden"><label id="label2"></label></td>
</tr>
<tr>
<td><input type="submit" value="Register" onclick="return validate();"/></td>
</tr>
</table>
</form>
</body>
</html>
success.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>success</title>
</head>
<body bgcolor="lightblue">
<center><h3>
Your record registered successfully.</h3></center>
</body>
</html>
View in Browser:
No comments:
Post a Comment