jQuery User Registration form Validation

By | September 25, 2012

jQuery user registration form validation will avoid some improper registration. Every registration web form should have a validation. when we implement registration form without validation, user may submit null values and many problems will occur, which leads our site to be more vulnerable. Here i have implemented registration page with 5 values( username, password, re-enter password, email and gender)

CSS for the registration form.

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
<style type="text/css">
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
#tex
{
width:120px;
float: left;
}
</style>

 

jQuery code and html code is given below.

$(‘#submit’).click(function() - When submit button is clicked, this jquery function is triggered.

var user=$(‘#user’).val(); - Data given in username field will be get through ID value and stored in variable called user. Likewise all field values will stored in a variable.

$(‘#dis’).slideDown().html(“<span>Please type Username</span>”); - This slidedown() function will be called, when we give username as empty. Likewise all fields validation will 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Jquery Registration 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 user=$('#user').val();
var pass=$('#pass').val();
var rpass=$('#rpass').val();
var email=$('#email').val();
var gender=$('#gender').val();

if(user=="")
{
$('#dis').slideDown().html("<span>Please type Username</span>");
return false;
}
if(pass=="")
{
$('#dis').slideDown().html('<span id="error">Please type Password</span>');
return false;
}
if(rpass=="")
{
$('#dis').slideDown().html('<span id="error">Again type Password</span>');
return false;
}
if(pass!=rpass)
{
$('#dis').slideDown().html('<span id="error">Password mismatch</span>');
return false;
}
if(email=="")
{
$('#dis').slideDown().html('<span id="error">Please type email</span>');
return false;
}

var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$('#dis').slideDown().html('<span id="error">Please type correct email</span>');
return false;
}
if ($("#gender:checked").length = 0){
$('#dis').slideDown().html('<span id="error">Please choose gender</span>');
return false;
}
});
});
</script>
</head>
<body>
<fieldset style="width:290px;">
<form method="post" action="">
<h1 style="font-size:18px;">Jquery Registration page validation</h1>
<label id="dis" style="width:250px;"></label><br>
<div id="tex">Username:</div>
<input type="text" name="user" id="user" /><br /><br />

<div id="tex">Password:</div>
<input type="password" name="pass" id="pass" /><br /><br />

<div id="tex">Re-type Password:</div>
<input type="password" name="pass" id="rpass" /><br /><br />

<div id="tex">Email:</div>
<input type="text" name="email" id="email"><br /><br />

<div id="tex">Gender:</div>
<input type="radio" name="gender" id="gender"> Male
<input type="radio" name="gender" id="gender"> Female<br>
<br>
<center><input type="submit" name="submit" id="submit" /></center>
</form>
</fieldset>
</body>
</html>

6 thoughts on “jQuery User Registration form Validation

  1. mathi

    superb code…….but if the validation data is in another file and how to call in the registration form……for me the value is not returning pls say urgent………

    Reply
  2. pankaj

    I want to validate username from server to check whether it’s available or not. How could we communicate with the server.

    Reply
  3. amit

    Hi,

    Can I use this type of user registration and login form in blogger???

    Please tell me.

    Thanks,
    Amit

    Reply
  4. Foppel

    Do Not Trust the Click Event of the submit button.
    A form can be submitted without clicking the button and the button can be activated without using the mouse.
    Always attach to the submit event of the form tag/object ( $(‘form’).on(‘submit’,…. )
    And you will still have to validate the values on the server side, as one could submit the form without js or even without using the webpage at all ( curl for example )

    Reply

Leave a Reply

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

unrumpled-septuor