jQuery Validation for Login Form

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
</style>

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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>

About prasad k

Prasad Kuppusamy has written 81 post in this blog.

i m php developer, web designer.

4 Responses to jQuery Validation for Login Form

  1. Mike Mazz says:

    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.

  2. Bapu says:

    Even though simple example but good explanation.

    Thank you!!!!!!

  3. bhk says:

    good example simple but clear

  4. Rinnie says:

    Thanks…Good explanation..

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

colleagueship-stephenville