Form Validation using jQuery Validation Plugin

No votes yet.
Please wait...

Validating a form is a must for proper and correct input of User.Client-side form validation is very useful for validating a form and it makes our web project more user-friendly.We can found many ways to perform client-side validation in HTML form, but jQuery Validation Plugin is the easiest way to validate a form.
Therefore in today’s tutorial Form Validation using jQuery Validation Plugin we are using jQuery Validation Plugin for validating our Html form.It allows us to implement validation instantly.

So, moving forward with the tutorial we can implement validation using some simple steps

Firstly,
To use jQuery Validation Plugin you need to include the jQuery library (jquery.min.js) and jQuery validation plugin library (jquery.validate.js).

1
2
<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>

The validate() method is used to validate a form based on the selector provided.
rules are key/value pairs defining custom rules. Key is the name of an element and value is an object consisting of rule/parameter pairs or a plain String.
messages are key/value pairs defining custom messages. Key is the name of an element and value is a message to display for respective element.

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
$(document).ready(function() {
$("#userForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
number: true
},
url: {
required: false,
url: true
},
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
agree: "required"
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
phone: {
required: "Please enter your phone number",
number: "Please enter only numeric value"
},
url: {
url: "Please enter valid url"
},
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
},
agree: "Please accept our policy"
}
});
});

HTML Code

The user registration form HTML which is validated with jQuery Validation Plugin.

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
<form id="userForm" class="userform" action="" method="post"><label for="name">Name</label>
<input id="name" name="name" type="text" /><label for="email">E-Mail</label>
<input id="email" name="email" type="email" />

<label for="phone">Phone</label>
<input id="phone" name="phone" type="phone" />

<label for="url">URL</label>
<input id="url" name="url" type="url" />

<label for="username">Username</label>
<input id="username" name="username" type="text" />

<label for="password">Password</label>
<input id="password" name="password" type="password" />

<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />

<label for="agree">Please agree to our policy</label>
<input id="agree" class="checkbox" name="agree" type="checkbox" />

<input class="submit" type="submit" value="Submit" />

</form>

CSS Code

The following CSS is used to styling the form and error message.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.userform{width: 400px;}
.userform p {
width: 100%;
}
.userform label {
width: 120px;
color: #333;
float: left;
}
input.error {
border: 1px dotted red;
}
label.error{
width: 100%;
color: red;
font-style: italic;
margin-left: 120px;
margin-bottom: 5px;
}
.userform input.submit {
margin-left: 120px;
}

Thats all we have to do for validating a form with JQuery Validation Plugin.
Hope this tutorial will help our fellow developers
For full code  Download Here
Guys Please comment us ,tell us about more challenges you guys face while developing so that our team can help you
Because Hurdles aren’t really hurdles

Be First to Comment

Leave a Reply

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

Solve : *
19 + 19 =