jQuery Form Validation Before Submit

In this tutorial, you will learn jQuery Form Validation before submit. I have shared a Real-time Validation script without a plugin. This script will generate an error message at the time of invalid input. Even It can make user-friendly & attractive forms. That’s why jQuery is the best option for client-side validation. It is very easy to implement in the project form.

jquery form validation

How to Validate Form Using jQuery

In this tutorial, I will learn you to validate a registration form using jquery. Don’t worry, After learning this validation, you can easily validate different types of complex forms.

Read Also

PHP Form Validation

jQuery Form Validation Demo

See the following validation demo that generates the -time  error message

real time jquery form validation demo

First of all, you should create  the following folder structure

myproject/
   |__validation-form.php
   |__validation-script.js
   |__style.css
   |

 

Now, configure the following steps to validate the form in a simple way.

1. Create a Validation Form

  • First of all, include the following files

jQuery Library CDN

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

Validation-script.js

<script type="text/javascript" src="validation-script.js"></script>

style.css

<link rel="stylesheet" href="style.css">
  • Create a validation form using the following HTML  code
<div class = "validation-form">

<form method = "post" id="myForm">
 
   <h3>jQuery Validation Form</h3>

  <div class="form-group">
     <input type="text" placeholder="First Name"  id="firstName">
     <div class="first-name-msg"></div>
  </div>

  <div class="form-group">
     <input type="text" placeholder="Last Name" id="lastName">
     <div class="last-name-msg"></div>
  </div>
    
  <div class="form-group">
     <input type="text" placeholder="Email" id="email">
     <div class="email-msg"></div> 
  </div>
    
  <div class="form-group">
     <input type="text" placeholder="Password" id="password">
     <div class="password-msg"></div> 
  </div>
    
  <div class="form-group">
     <input type="text" placeholder="Confirm Password" id="cpassword">
     <div class="cpassword-msg"></div>
  </div>
    
  <div class="form-group">
     <input type="submit" value="Register Now" id="submit-btn" class="allowed-submit" disabled="desabled">
  </div>
</form>
    
</div>
  • Use the following compete for a validation form

File Name – validation-form.php

<!DOCTYPE html>
<html>
<head>
  <title>JQuery Form Validation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class = "validation-form">

<form method = "post" id="myForm">
 
   <h3>jQuery Validation Form</h3>

  <div class="form-group">
     <input type="text" placeholder="First Name"  id="firstName">
     <div class="first-name-msg"></div>
  </div>

  <div class="form-group">
     <input type="text" placeholder="Last Name" id="lastName">
     <div class="last-name-msg"></div>
  </div>
    
  <div class="form-group">
     <input type="text" placeholder="Email" id="email">
     <div class="email-msg"></div> 
  </div>
    
  <div class="form-group">
     <input type="password" placeholder="Password" id="password">
     <div class="password-msg"></div> 
  </div>
    
  <div class="form-group">
     <input type="password" placeholder="Confirm Password" id="cpassword">
     <div class="cpassword-msg"></div>
  </div>
    
  <div class="form-group">
     <input type="submit" value="Submit" id="submit-btn" class="allowed-submit" disabled="desabled">
  </div>
</form>
    
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="validation-script.js"></script>

</body>
</html>

2. Design Validation Form

Write the following CSS code to design the form.

File Name: mystyle.css

 .allowed-submit{opacity: .5;cursor: not-allowed;}
  .valid-input{
    border:1px solid green !important;
  }
  .invalid-input{
    border:1px solid red !important;
  }
  .invalid-msg{
    color: red;
  }
.validation-form h3{
  background:#eae9e9;
  text-align:center;
  padding:5px 0px;
}
.validation-form{
  border:1px solid orange;
  width:50%;

  background:#dad9d9;
  padding:10px 30px;
}
.validation-form .form-group{
  margin:15px 0px;
}
.validation-form .form-group input{
  padding:10px;
  width:94%;
  boz-sizing:border-box;
   border:none;
   border-bottom:1px solid orange;
}
.validation-form .form-group input:focus{
 outline:unset;
}
.validation-form .form-group input[type="submit"]{
  width:100%;
 
  background:orange;
  font-size:20px;
  color:white;
}

3. Write jQuery Form Validation Script

Before writing the validation script, You should  know the following validation rule

jQuery Validation Rule

  • All the input field must be required
  • First Name – can accept only characters & whitespaces
  • Last Name – can accept only characters & whitespaces
  • Email – must have @ symbol for valid email format.
  • Password – must be a group of digits, characters & special characters with at least 8 length
  • Confirm Password – same rule like a password but confirm password must be matched with the password.

File Name-  validation-script.js

$(document).ready(function () {
//validation for First Name
$('#firstName').on('input', function () {
var firstName = $(this).val();
var validName = /^[a-zA-Z ]*$/;
if (firstName.length == 0) {
$('.first-name-msg').addClass('invalid-msg').text("First Name is required");
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!validName.test(firstName)) {
$('.first-name-msg').addClass('invalid-msg').text('only characters & Whitespace are allowed');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else {
$('.first-name-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});
// valiadtion for Last Name
$('#lastName').on('input', function () {
var secondName = $(this).val();
var validName = /^[a-zA-Z ]*$/;
if (secondName.length == 0) {
$('.last-name-msg').addClass('invalid-msg').text("Last Name is required");
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!validName.test(secondName)) {
$('.last-name-msg').addClass('invalid-msg').text('only characters & Whitespace are allowed');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else {
$('.last-name-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});
// valiadtion for Email
$('#email').on('input', function () {
var emailAddress = $(this).val();
var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (emailAddress.length == 0) {
$('.email-msg').addClass('invalid-msg').text('Email is required');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!validEmail.test(emailAddress)) {
$('.email-msg').addClass('invalid-msg').text('Invalid Email Address');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else {
$('.email-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});
// valiadtion for Password
$('#password').on('input', function () {
var password = $(this).val();
var cpassword = $('#cpassword').val();
var uppercasePassword = /(?=.*?[A-Z])/;
var lowercasePassword = /(?=.*?[a-z])/;
var digitPassword = /(?=.*?[0-9])/;
var spacesPassword = /^$|\s+/;
var symbolPassword = /(?=.*?[#?!@$%^&*-])/;
var minEightPassword = /.{8,}/;
if (password.length == 0) {
$('.password-msg').addClass('invalid-msg').text('Password is required');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!uppercasePassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('At least one Uppercase');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!lowercasePassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('At least one Lowercase');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!digitPassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('At least one digit');
$(this).addClass('invalid-input').removeClass('valid-input');
} else if (!symbolPassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('At least one special character');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (spacesPassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('Whitespaces are not allowed');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if (!minEightPassword.test(password)) {
$('.password-msg').addClass('invalid-msg').text('Minimum length 8');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if(cpassword.length>0) {
if(password!=cpassword){
$('.cpassword-msg').addClass('invalid-msg').text('must be matched');
$('#cpassword').addClass('invalid-input').removeClass('valid-input');
}
else
{
$('.cpassword-msg').empty();
$('#cpassword').addClass('valid-input').removeClass('invalid-input');
}
$('#password').addClass('valid-input').removeClass('invalid-input');
$('.password-msg').empty();
} 
else {
$('.password-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});
// valiadtion for Confirm Password
$('#cpassword').on('input', function () {
var password = $('#password').val();
var cpassword = $(this).val();
if (cpassword.length == 0) {
$('.cpassword-msg').addClass('invalid-msg').text('Confirm password is required');
$(this).addClass('invalid-input').removeClass('valid-input');
}
else if(cpassword != password) {
$('.cpassword-msg').addClass('invalid-msg').text('must be matched');
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else {
$('.cpassword-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});
// validation to submit the form
$('input').on('input',function(e){
if($('#myForm').find('.valid-input').length==5){
$('#submit-btn').removeClass('allowed-submit');
$('#submit-btn').removeAttr('disabled');
}
else{
e.preventDefault();
$('#submit-btn').attr('disabled','disabled')
}
});
});

Form Input Box Validation Using jQuery

Now, learn to validate the following inputs field separately.  It will make it easy to implement it into our project form.

First Name Validation

The First Name only accepts only characters and whitespaces.

//validation for First Name 
$('#firstName').on('input', function () { 
var firstName = $(this).val(); 
var validName = /^[a-zA-Z ]*$/; 
if (firstName.length == 0) {
$('.first-name-msg').addClass('invalid-msg').text("First Name is required");
$(this).addClass('invalid-input').removeClass('valid-input'); 
} 
else if (!validName.test(firstName)) {
$('.first-name-msg').addClass('invalid-msg').text('only characters & Whitespace are allowed'); 
$(this).addClass('invalid-input').removeClass('valid-input'); 
} 
else { 
$('.first-name-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input'); 
} 
});

Last Name Validation

The Last Name also accepts only characters and whitespaces.

// valiadtion for Last Name 
$('#lastName').on('input', function () { 
var secondName = $(this).val();
var validName = /^[a-zA-Z ]*$/;
if (secondName.length == 0) { 
$('.last-name-msg').addClass('invalid-msg').text("Last Name is required"); 
$(this).addClass('invalid-input').removeClass('valid-input'); 
} 
else if (!validName.test(secondName)) { 
$('.last-name-msg').addClass('invalid-msg').text('only characters & Whitespace are allowed');
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else { 
$('.last-name-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
} 
});

Email Validation

A valid Email address must contain @ symbol.

// valiadtion for Email 
$('#email').on('input', function () { 
var emailAddress = $(this).val();
var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
if (emailAddress.length == 0) { 
$('.email-msg').addClass('invalid-msg').text('Email is required'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!validEmail.test(emailAddress)) { 
$('.email-msg').addClass('invalid-msg').text('Invalid Email Address'); 
$(this).addClass('invalid-input').removeClass('valid-input');
}
else { 
$('.email-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input'); 
} 
});

Password Validation

Password validation must require the following rule

  • It must contain at least one digits, special characters, uppercase & lowercase
  • Its maximum length must be 8 characters
// valiadtion for Password 
$('#password').on('input', function () { 
var password = $(this).val(); 
var cpassword = $('#cpassword').val(); 
var uppercasePassword = /(?=.*?[A-Z])/;
var lowercasePassword = /(?=.*?[a-z])/;
var digitPassword = /(?=.*?[0-9])/;
var spacesPassword = /^$|\s+/;
var symbolPassword = /(?=.*?[#?!@$%^&*-])/;
var minEightPassword = /.{8,}/;
if (password.length == 0) { 
$('.password-msg').addClass('invalid-msg').text('Password is required');
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!uppercasePassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('At least one Uppercase'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!lowercasePassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('At least one Lowercase'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!digitPassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('At least one digit'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!symbolPassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('At least one special character'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (spacesPassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('Whitespaces are not allowed'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if (!minEightPassword.test(password)) { 
$('.password-msg').addClass('invalid-msg').text('Minimum length 8');
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if(cpassword.length>0) { 
if(password!=cpassword){ 
$('.cpassword-msg').addClass('invalid-msg').text('must be matched');
$('#cpassword').addClass('invalid-input').removeClass('valid-input');
}
else { 
$('.cpassword-msg').empty(); 
$('#cpassword').addClass('valid-input').removeClass('invalid-input');
}
$('#password').addClass('valid-input').removeClass('invalid-input');
$('.password-msg').empty();
} 
else { 
$('.password-msg').empty();
$(this).addClass('valid-input').removeClass('invalid-input');
}
});

Confirm Password Validation

Confirm password validation rule is the same as the password. but It must be matched with the password input input

// valiadtion for Confirm Password 
$('#cpassword').on('input', function () { 
var password = $('#password').val(); 
var cpassword = $(this).val();
if (cpassword.length == 0) { 
$('.cpassword-msg').addClass('invalid-msg').text('Confirm password is required');
$(this).addClass('invalid-input').removeClass('valid-input');
} 
else if(cpassword != password) { 
$('.cpassword-msg').addClass('invalid-msg').text('must be matched'); 
$(this).addClass('invalid-input').removeClass('valid-input');
} else { 
$('.cpassword-msg').empty(); 
$(this).addClass('valid-input').removeClass('invalid-input'); 
} 
});

 

Conclusion:

You have learned the jQuery form validation before submit. Now, you are able to quickly validate any type of form. If you have to ask questions. You can ask me through the below comment box.

Leave a Comment