jQuery Form Validation Using Validator() From Scratch

jQuery Form Validation Using Validator() From Scratch

How to validate a form data on client side before send to the form data on server. Today we are going to show how to validate form data on client side using the jQuery form validation plugin.

jQuery form Validation

The jQuery provide several plugins for validating a diffrent diffrent types of form data on client side. In this form validation tutorial, we will discuss simple and basic form validation using jQuery validator() method.

Contents

  • Create one html form
  • Keep jQuery cdn in form
  • Write validation rules
  • output

Create one html form

In this step, we need to create one html file. And inside this file we will create some fields like firstname, lastname, email, password.

<!DOCTYPE html>
<html>
<head>
<style>
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]"><br>

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

    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>

</body>
</html>

Keep jQuery cdn in form

Now we need to put the jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin we need to include cdn library of jQuery validation plugin.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

Write validation rules

Next, we need to write some validation rules in script tag. Below we have written this basic rules for validating a form data before send to the server. The validate() method is used to validate a form based on the selector provided.

<script>
$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
 
  });
});
</script>

output

jQuery Form validator()

Registration





Leave a Reply

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