Online Snippets Library

Easy Form Validation by jquery validation plugin

jQuery validation plugin makes easy form validation,It offering plenty of customization options.

Example

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation by jquery validation plugin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
label.error{
color:red;  
}
</style>
</head>
<body>
<div class="container-fluid">
  <h2>Form Validation by jquery validation plugin</h2>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
      <legend>Validating a complete form</legend>
      <p>
        <label for="firstname">First Name</label>
        <input id="firstname" name="firstname" type="text">
      </p>
      <p>
        <label for="lastname">Last Name</label>
        <input id="lastname" name="lastname" type="text">
      </p>
      <p>
        <label for="username">User Name</label>
        <input id="username" name="username" type="text">
      </p>
      <p>
        <label for="password">Password</label>
        <input id="password" name="password" type="password">
      </p>
      <p>
        <label for="confirm_password">Confirm Password</label>
        <input id="confirm_password" name="confirm_password" type="password">
      </p>
      <p>
        <label for="email">Email</label>
        <input id="email" name="email" type="email">
      </p>
      <p>
        <label for="agree">Please agree to our terms and condition</label>
        <input type="checkbox" class="checkbox" id="agree" name="agree">
      </p>
      <p>
        <input class="submit" type="submit" value="Submit">
      </p>
    </fieldset>
  </form>
</div>

</body>
</html>

Javascript
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript">
$(document ).ready(function() {
$("#signupForm").validate({
      rules: {
        firstname: "required",
        lastname: "required",
        username: {
          required: true,
          minlength: 2
        },
        password: {
          required: true,
          minlength: 5
        },
        confirm_password: {
          required: true,
          minlength: 5,
          equalTo: "#password"
        },
        email: {
          required: true,
          email: true
        },
        agree: "required"
      },
      messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        username: {
          required: "Please enter a user name",
          minlength: "Your user name must consist of at least 2 characters"
        },
        password: {
          required: "Please provide a password",
          minlength: "Your password must be at least 5 characters long"
        },
        confirm_password: {
          required: "Please provide a password",
          minlength: "Your password must be at least 5 characters long",
          equalTo: "Please enter the same password as above"
        },
        email: "Please enter a valid email address",
        agree: "Please accept our policy",
              }
    });

});
</script>