Ajax Login Validation for JSP

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");
%>

Demo Of the projectis here

Download source files for project here

Form Validation with jquery-plugin-validation

I was trying to apply JQuery for HTML form validation. I googled different plug-in but jquery-plugin-validation impressed me more. But to fulfill my requirement, I did some updating so that the errors can be displayed on the top of the form, as shown below

After making some small changes I got it. If you also want similar kind of validation style, you can download sample files from here.