Form Validation Using Jquery

This tutorial shows you how to add form validation to your website using the jQuery plugin.

Using a jQuery form review plugin serves many purposes. This gives you extra functionality like easily displaying custom error messages and adding conditional logic to validate forms.

The validation library can also help you add validation to your HTML forms with little or no markup changes. Validity conditions can also be easily added, deleted or changed at any time.

Table of Contents

There are some step to follow for the Form validation

Include jQuery. First, we need to include the jQuery library
Include the jQuery Validation Plugin.
Create the HTML Form. For the registration, we want to collect the following user information:
Create the Validation Rules

Include jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Include the jQuery Validation Plugin

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

Create the HTML Form.

For the registration, we want to collect the following user information.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Form Validation Using Jquery Examples</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
  .error{color: red;}
</style>
<div class="container" style="margin-top:50px">
<h1 style="text-align:center;">Form Validation Using Jquery Examples</h1><br>
  <div class="row">
    <div class="col-md-3"></div>
      <div class="col-md-6">
        <form id="registerForm">
          <div class="form-group">
             <input type="text" class="form-control" name="name" placeholder="Name" required="">
          </div>
          <div class="form-group">
             <input type="email" class="form-control" name="email" placeholder="Email" required="">
          </div>
          <div class="form-group">
             <input type="password" class="form-control" name="password" placeholder="Password" required="">
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="gender" required=""> Male
            </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="gender" required=""> Female
            </label>
          </div>
          <div class="form-group">
             <input type="file" class="form-control" name="image" required="">
          </div>
          <div class="form-group">
             <textarea rows="5" class="form-control" name="message" placeholder="Message" required=""></textarea>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-warning btn btn-block">Submit</button>
          </div>  
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Create the Validation Rules

To start validating forms with this plugin, simply add the following JavaScript code to the website:

<script type="text/javascript">
  $(document).ready(function() {
    $("#registerForm").validate({
      rules:{
        name:{
          required:true,
          minlength:3
        },
        email:{
          required:true,
          email:true
        },
        password:{
          required:true,
          minlength:8
        }
      }
    });
  });
</script>

Output

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊