jQuery Form Validation Before Submit Example


To validate form data on the client side before sending the form data on the server using jQuery. Through this tutorial, we are going to show how to validate form data on the client side using the jQuery form validation plugin.

JQuery provides several plugins for validating different types of form data on the client side. In this form validation tutorial, we will discuss simple and basic form validation using the jQuery validator() method. And as well as, you can use the free jquery form validation demo with source code.

jQuery Form Validation Before Submit Example Tutorial

Steps to create simple jquery form validation example before submit:

  • 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>
  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;
<div class="common_box_body test">
  <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">


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.

    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      password: {
        required: true,
        minlength: 5


jQuery Form validator()


Recommended jQuery Tuorials

  1. jQuery Form Validation Custom Error Message
  2. jQuery AJAX Form Submit PHP MySQL
  3. Simple Registration Form in PHP with Validation
  4. jQuery Ajax Form Submit with FormData Example
  5. Laravel 6 Ajax Form Submit With Validation Tutorial
  6. Laravel Google ReCaptcha Form Validation
  7. Laravel 6 | jQuery Form Validation Tutorial with Demo Example
  8. Form Validation Example In Laravel 6
  9. Codeigniter php jQuery Ajax Form Submit with Validation


Jaspreet Singh Ghuman

Jaspreet Singh Ghuman


Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.


Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00