Ajax Login Validation for JSP
October 22, 2010 11 Comments
Here i have tried to build a small Ajax validation example, which will check the login validation using Ajax concept of jQuery.
In this example,
login page consist of the User id and password field. On submit, jQuery will send the control to the JSP page(check.jsp) using ajax.
<!--index.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>
<!-- ..//JQuery Source\\.. -->
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<!-- ..//JavaScript Code for this page\\.. -->
<script type="text/javascript">
$(document).ready(function(){
$("#login_frm").submit(function(){
//remove previous class and add new "myinfo" class
$("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(1000);
this.timer = setTimeout(function () {
$.ajax({
url: 'check.jsp',
data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
type: 'post',
success: function(msg){
if(msg != 'ERROR') // Message Sent, check and redirect
{ // and direct to the success page
$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
//redirect to secure page
document.location='login.jsp?user='+msg;
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
});
}
}
});
}, 200);
return false;
});
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Form</title>
</head>
<body>
<form name="login_frm" id="login_frm" action="" method="post">
<div id="login_box">
<div id="login_header">
Login
</div>
<div id="form_val">
<div>User Id :</div>
<div><input type="text" name="login_id" id="login_id"/><span style="font-size: 10px;">hint : admin</span></div>
<div>Password:</div>
<div><input type="password" name="password" id="password"/><span style="font-size: 10px;">hint : test</span></div>
<div style="clear:both;height:0px;"></div>
<div id="msgbox"></div>
</div>
<div id="login_footer">
<label>
<input type="submit" name="login" id="login" value="Login" />
</label>
</div>
</div>
</form>
</body>
</html>
check.jsp will check the login and return an id if the login is valid or it will send ERROR.
<pre><!--check.jsp-->
</pre>
<%
String user=request.getParameter("un");
String pass=request.getParameter("pw");
int user_id=12;
if(user.equalsIgnoreCase("admin") &&
pass.equals("test") )
{
out.print(user_id);
}
else
{
out.print("ERROR");
}
%>
I am sending ID, because using JavaScript I am redirecting the page to the login page where the session for the login will be created. id will not be visible in the source, so that only valid user can redirected to login.jsp
<!--login.jsp-->
<%@page session="true"%>
<%
String user=request.getParameter("user");
session.setMaxInactiveInterval(24 * 60 * 60);
session.setAttribute("user",user);
response.sendRedirect("success.jsp");
%>
On success.jsp page one can sign out, where the session will get clear.
<!--success.jsp-->
<%@page session="true"%>
<%
if(session.getAttribute("user")==null)
{
response.sendRedirect("index.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>Login Success</title>
</head>
<body>
<center>
<h1>You are successfully logged in</h1>
<h3><a href="logout.jsp">Logout</a></h3>
</center>
</body>
</html>
<!--logout.jsp-->
<%@page import = "java.util.Date" session="true"%>
<%
session.setAttribute("user", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>
superb login page!!!!!
hi. why when I connect to the database it does not run properly. Although it always login the return value is ERROR?
hi Ning, did u tried with the downloaded source code?
hi Prashant, i downloaded your source code and run successfully. Thanks for sharing!
i wanna connect db with this soucr code.. help me
can you send me your source project? so that i can go threw it?
im getting sql exception error.. bt u didnt use db it seems
im getting error… pl help me
if we enter wromg password and username …it will validate and got success page……!
if i enter wrong password also it is validate and got success page
help me i am new to ajax
thanks in advance
have you used then return success?