Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
setup simple jQuery form validation

How to setup simple jQuery form validation?

Aman Jain, September 15, 2021September 29, 2021

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

  1. Download from jquery.com.
  2. Include directly from CDN
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  3. 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

Related

Uncategorized Javascript

Post navigation

Previous post
Next post

Related Posts

Softwares angular file upload

How to upload multiple files in angular 12 reactive form

June 20, 2021November 8, 2023

How to upload multiple files in angular 12 reactive form Uploading multiple files with progress in angular is too easy, you can implement it in your website using the below guideline. i will suggest to read my last post Angular file upload with post form data and php $_FILES to…

Read More
Javascript How to set and get cookies in angular

How to set and get cookies in angular ?

April 14, 2022November 6, 2023

This article will give you the understanding of set and get cookies in angular. Cookies are used to store the data in client computer, Cookie can hold tiny information in computer and can retrieve when required for same website. Cookies can store key value in client system and its send…

Read More
Javascript ng init angular 2

ng init alternative in angular 2

October 6, 2021October 7, 2021

In angular js we have ng-init directive to process the expression or initialize the any variable in html view but in angular 2 we do not have any option to initialize variable or expression in html template, so in this tutorial we will learn how to implement ng init like…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mapping Together: The Vibrant Spirit of OpenStreetMap Japan
  • Understanding High Vulnerabilities: A Deep Dive into the Weekly Summary
  • Building a Million-Dollar Brand: The Journey of Justin Jackson
  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version