jQuery Registration Form validation using Validator

jquery registration form validation; Through this tutorial, i am going to show you how to validate form before submit using jquery validator.

Registration Form Validation using jQuery

  • Create html form
  • Include jQuery cdn in form
  • Implement validation rules

Create html form

Create one html file and then inside this file; create some fields like firstname, lastname, email, password; as shown below:

<!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">

Include jQuery cdn in form

Include jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin you 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>

Implement validation rules

Implement some validation rules in script tag for validating a form data before send or submit to the server. As shown below:

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

Your Registration form will look like with jquery validation

jQuery Form validator()


Recommended jQuery Tutorials

Leave a Comment