Posted Date:04-03-2017

In this Post we will explain how to validate html/php forms using jquery validator.

First we will made a simple validation form using JQuery.

Step 1: Include jQuery And Validation Plugin

Create a new HTML file named index.html and include jQuery before the closing body tag:

Step 2:Create the HTML Form

we create basic html form

1
2
3
4
5
6
7
8
9
10
11
<form action="" id="example" method="post">
   <label for="firstname">First Name</label>
   <input type="text" name="firstname" id="firstname" placeholder="Karthik"/>
   <label for="lastname">Last Name</label>
   <input type="text" name="lastname" id="lastname" placeholder="N"/>
   <label for="email">Email</label>
   <input type="email" name="email" id="email" placeholder="karthik@pheonixsolutions.com"/>
   <label for="password">Password</label>
   <input type="password" name="password" id="password" placeholder="Password"/>
   <button type="submit">Register</button>
</form>

Step 3: Create the Validation Rules

Finally, initialize the form validation plugin give you form id and add every input field name into script validation

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
$("#example").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
      messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });

Conclusion:

if you are following above all the steps you getting this kind of code

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
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
 
    <title>Jquery Validation</title>
    <script type="text/javascript">
        // Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("#example").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
      messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
    </script>
</head>
<body>
<div class="container">
  <h2>Registration</h2>
  <form action="" id="example" method="post">
 
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="Karthik"/>
 
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="N"/>
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="karthik@pheonixsolutions.com"/>
 
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="Password"/>
 
    <button type="submit">Register</button>
 
  </form>
</div>
</body>
</html>
Post Views: 172

Leave a Reply