How to setup simple jQuery form validation?

In this tutorial, we are going to learn jQuery form validation using jQuery validation plugin. this plugin have many features like to validate text, email, phone number , sync Ajax request etc.

Let’s begin with step by step guide:

Step 1: Create a html file

Firstly we are going to create html file which contains a form, jQuery, CSS and query validation plugin library.

Index.html

<div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h3>Jquery Form Validation - Readerstacks</h3>
            <form name="registerform">
              <div class="form-group">
                <label>First Name</label>
                <input type="text" name="firstName" class="form-control" />
              </div>
              <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="lastName" class="form-control" [ />
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" class="form-control" />
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" id="password" class="form-control" />
              </div>
              <div class="form-group">
                <label>Confirm Password</label>
                <input
                        type="password"
                        name="confirmPassword"
                        class="form-control"
                        />
              </div>
              <div class="form-group">
                <button class="btn btn-primary">Register</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

Step 2: Include jQuery library

In this article we are going to use jQuery library version 3.6.0 but it’s tested upto 3.1.1. There is multiple ways to include the jquery

Download from jquery.com.
Include directly from CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
Download using bower or Npm
npm install jquery
bower install jquery

Step 3 : Include jQuery validation library

Same as jquery we can download it in multiple ways.

1. Download from github.

2. Include directly from CDN

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>

3. Download using Bower or Npm

npm install jquery-validation

bower install jquery-validation

Final index.html file

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <script type="text/javascript" src="index.js"></script>
  <style>
    .error {
      color: red
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h3>Jquery Form Validation - Readerstacks</h3>
            <form name="registerform">
              <div class="form-group">
                <label>First Name</label>
                <input type="text" name="firstName" class="form-control" />
              </div>
              <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="lastName" class="form-control" [ />
              </div>
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" class="form-control" />
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" id="password" class="form-control" />
              </div>
              <div class="form-group">
                <label>Confirm Password</label>
                <input
                        type="password"
                        name="confirmPassword"
                        class="form-control"
                        />
              </div>
              <div class="form-group">
                <button class="btn btn-primary">Register</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- credits -->
    <div class="text-center">
      <p>
        <a href="#" target="_top">jquery Forms Validation </a>
      </p>
      <p>
        <a href="https://readerstacks.com" target="_top">readerstacks.com</a>
      </p>
    </div>
  </div>
</body>

We have also included for better design.

we added 5 input fields and validated all with jquery.

Step 4 : Create validation rules

Now, We are going to implement the rules for form.

index.js

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registerform"
  $("form[name='registerform']").validate({
    // Specify validation rules
    rules: {
      // left side input name , right side validation name
      firstName: 'required',
      lastName: 'required',
      email: {
        required: true,

        // built in email validation
        email: true
      },
      password: {
        required: true,
        minlength: 5
      },
      confirmPassword: {
        required: true,

        equalTo: '#password'
      }
    },
    // Custom validation error messages
    messages: {
      firstName: 'Please enter your firstname',
      lastnNme: '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',
      confirmPassword: {
        equalTo: 'Password and confirm password does not match'
      }
    },
    // hanlde the submission
    submitHandler: function(form) {
      form.submit();
    }
  });
});

Live Preview and Download link:

Download from github