jQuery Validation for Login Form

By | August 11, 2012

Every Login form should have client side validation. If we have not used client side validation, our code will go to server and check the username and password, it will increase server traffic. By using client side validation null username and password can be filtered in browser itself, so that we can reduce server traffic.

   

Here is the code
[code type=css]
<style type=”text/css”>
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
</style>

[/code]

jQuery Validation for login page is given below.

$(document).ready(function() – When page is load, control comes inside this code.
$(‘#submit’).click(function()  – Submit button having ID as submit, when submit button is clicked control comes inside this function.
var username=$(‘#user’).val(); – Text box with ID user’s value  will be stored in variable username.
var password=$(‘#pass’).val(); – Text box with ID pass‘s value  will be stored in variable password.
if(username==””) – if username is empty, this if loop will work. Likewise for password.
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”); – Error message will be displayed in label having ID dis with slidedown effect 
return false; – When return type is false, page won’t refresh (i.e., php code won’t work)

[code type=html]

<html>
<head>
<title>Jquery login page validation</title>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#submit’).click(function(){
var username=$(‘#user’).val();
var password=$(‘#pass’).val();

if(username==””)
{
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”);
return false;
}
if(password==””)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Please type Password</span>’);
return false;
}
});
});
</script>
</head>
<body>

<fieldset style=”width:250px;”>
<form method=”post” action=”index.php”>
Jquery login page validation

<label id=”dis”></label><br>
Username: <input type=”text” name=”user” id=”user” /><br />
Password: <input type=”password” name=”pass” id=”pass” /><br /><br />
<center><input type=”submit” name=”submit” id=”submit” /></center>
</form>

</fieldset>
</body>
</html>

[/code]

7 thoughts on “jQuery Validation for Login Form

  1. Mike Mazz

    I appreciate this post. I really find validation can be done in some many ways for web forms. We still leverage server side validation because we’ve built our own controls to generate controls, e.g., textfield, textarea, spinner, etc. and these all take into account validation failures so that we can consistently markup the form with necessary indication of failures.
    Additionally, though Javascript prevents making the rpc call in most cases this is very little overhead.

    Reply
  2. Bapu

    Even though simple example but good explanation.

    Thank you!!!!!!

    Reply

Leave a Reply to Rinnie Cancel reply

Your email address will not be published. Required fields are marked *

prealliance-septuor