JavaScript Form Validation

by

In this tutorial, I provide the standard & simple javascript form validation code with an example. It will help you to validate a signup or login form from the friend-end. Even It begins to start validating and display an error message while you enter the values into the input fields.

Here, you learn to validate a registration form that has the First Name, Last Name, Email Address, Mobile Number, Password & Confirm Password. After learning it, You can easily create a client-side form validation in javascript.

javascript form validation

Javascript Form Validation Before Submit

Now, Let’s understand the following Input validation one by one. The validation code of each input field is written within a custom function. So that you can easily use it to validate the form before or after submission.

Learn Also –

Create Login Form Using PHP

Create Registration Form Using PHP

Admin Panel in PHP with Source Code

First Name Validation

You have to validate the First Name Input using the following Validation rule –

  • A First Name must not be empty.
  • The First Name must be the only letter that may be in uppercase or lowercase
  • The First Name must not have white spaces

First Name Input Code-

<input type="text" id="firstName" placeholder="First Name">
<div id="first-name-err"></div>

First Name Validation Code –

// First Name Validation
var firstName= document.getElementById("firstName");

var firstNameValidation=function(){

   firstNameValue=firstName.value.trim(); 
   validFirstName=/^[A-Za-z]+$/;
   firstNameErr=document.getElementById('first-name-err');

   if(firstNameValue=="")
   {
    firstNameErr.innerHTML="First Name is required";

   }else if(!validFirstName.test(firstNameValue)){
     firstNameErr.innerHTML="First Name must be only string without white spaces";
   }else{
     firstNameErr.innerHTML="";
     return true;
    
   }
}

firstName.oninput=function(){
   
   firstNameValidation();
}

Last Name Validation

You have to validate the Last Name Input using the following Validation rule –

  • The Last Name must not be empty.
  • Last Name must be the only letters that may be in uppercase or lowercase
  • The LastName must not have white spaces

Last Name Input –

<input type="text" id="lastName" placeholder="Last Name Name">
<div id="last-name-err"></div>

Last Name Validation Code –

  // Last Name Validation
  var lastName= document.getElementById("lastName");

  var lastNameValidation= function(){

   lastNameValue=lastName.value.trim(); 
   validLastName=/^[A-Za-z]+$/;
   lastNameErr=document.getElementById('last-name-err');

   if(lastNameValue=="")
   {
    lastNameErr.innerHTML="Last Name is required";

   }else if(!validLastName.test(lastNameValue)){
     lastNameErr.innerHTML="Last Name must be only string without white spaces";
   }else{
     lastNameErr.innerHTML="";
     return true;
   }
  }

lastName.oninput=function(){

   lastNameValidation();
}

Email Address Validation

You have to validate the Email Address Input using the following Validation rule –

  • The Email Input must not be empty.
  • Email Address must be valid & contained @ symbol
  • An Email Address must not have white spaces

Email Address Input –

<input type="email" id="emailAddress" placeholder="Email Address">
<div id="email-err"></div>

Email Address Validation Code –

// Email Address Validation
 var emailAddress= document.getElementById("emailAddress");;
 var emailAddressValidation= function(){

  emailAddressValue=emailAddress.value.trim(); 
   validEmailAddress=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
   emailAddressErr=document.getElementById('email-err');

   if(emailAddressValue=="")
   {
    emailAddressErr.innerHTML="Email Address is required";

   }else if(!validEmailAddress.test(emailAddressValue)){
     emailAddressErr.innerHTML="Email Addre must be in valid formate with @ symbol";
   }else{
     emailAddressErr.innerHTML="";
     return true;
   }

 }

emailAddress.oninput=function(){

   emailAddressValidation();
}

Mobile Number Validation

You have to validate the Mobile Number Input using the following Validation rule –

  • The Mobile Number Input must not be empty.
  • Mobile Number must contain the only number of 10 digits
  • A Mobile Number must not have white spaces

Mobile Number Input –

<input type="text" id="mobileNumber" placeholder="Mobile Nubmer">
<div id="mobile-number-err"></div>

Mobile Number Validation Code –

// Mobile Number Validation
 var mobileNumber= document.getElementById("mobileNumber");

 var mobileNumberValidation = function(){

   mobileNumberValue=mobileNumber.value.trim(); 
   validMobileNumber=/^[0-9]*$/;
   mobileNumberErr=document.getElementById('mobile-number-err');

   if(mobileNumberValue=="")
   {
    mobileNumberErr.innerHTML="Mobile Number is required";

   }else if(!validMobileNumber.test(mobileNumberValue)){
     mobileNumberErr.innerHTML="Mobile Number must be a number";
   }else if(mobileNumberValue.length!=10){

      mobileNumberErr.innerHTML="Mobile Number must have 10 digits";
   }
   else{
     mobileNumberErr.innerHTML="";
     return true;
   }

 }
mobileNumber.oninput=function(){

   mobileNumberValidation();
}

Password Validation

You have to validate the Password Input using the following Validation rule –

  • The Password Input must not be empty.
  • Password must contain at least one uppercase, lowercase letter, digit, special character & 8 characters long
  • A Password must not have white spaces

Password Input –

<input type="password" id="password" placeholder="Password">
  <div id="password-err"></div>

Password Validation Code –

// Password Validation
var password= document.getElementById("password");;

var passwordValidation = function(){

  passwordValue=password.value.trim(); 
   validPassword=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
   
   passwordErr=document.getElementById('password-err');

   if(passwordValue=="")
   {
    passwordErr.innerHTML="Password is required";
   }else if(!validPassword.test(passwordValue)){
     passwordErr.innerHTML="Password must have at least one Uppercase, lowercase, digit, special characters & 8 characters";
   }
   else{
     passwordErr.innerHTML="";
     return true;
   }
}

password.oninput=function(){

   passwordValidation();

 confirmPasswordValidation();
   
}

Confirm Password Validation

You have to validate the Confirm Password Input using the following Validation rule –

  • The Confirm Password Input must not be empty.
  • The Confirm Password must match with Password

Confirm Password Input –

<input type="password" id="confirmPassword" placeholder="Confirm Password">
<div id="confirm-password-err"></div>

Confirm Password Validation Code –

// Confirm Password Validation
var confirmPassword= document.getElementById("confirmPassword");;

var confirmPasswordValidation=function(){
   confirmPasswordValue=confirmPassword.value.trim(); 
   
   confirmPasswordErr=document.getElementById('confirm-password-err');
   if(confirmPasswordValue==""){
       confirmPasswordErr.innerHTML="Confirm Password is required";
   }

  else if(confirmPasswordValue!=password.value){
     confirmPasswordErr.innerHTML="Confirm Password does not match";
   }
   else{
     confirmPasswordErr.innerHTML="";
     return true;
   }
}

confirmPassword.oninput=function(){

 confirmPasswordValidation();
   
}

Javascript Form Input on Submit

If you want to validate your form on submit then you can use the following line of javascript code.

document.getElementById("registrationForm").onsubmit=function(e){

  
  firstNameValidation();
  lastNameValidation();
  emailAddressValidation();
  mobileNumberValidation();
  passwordValidation();
  confirmPasswordValidation();

  if(firstNameValidation()==true && 
    lastNameValidation()==true && 
    emailAddressValidation() == true && 
    mobileNumberValidation()==true && 
    passwordValidation()==true && 
    confirmPasswordValidation()==true){
    return true;
  }else{
    return false;
  }
}

How to Validate a Form with JavaScript

To validate a form with javascript, you will have to configure the following two simple steps –

1. Create an HTML Form

You will learn to validate form based on id of its input fields. So, I have created an HTML form with the following input fields that have its own type & id attribute.

  Input Field  Type Attribute  Id Attribute
  First Name  type=”text”  id=”firstName”
  Last Name  type=”text”  id=”lastName”
  Email Address  type=”email”  id=”emailAddress”
  Mobile Number  type=”text”  id=”mobileNumber”
  Password  type=”password”  id=”password”
  Confirm Password  type=”password”  id=”confirmPassword”

HTML Form Code

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="html-form">
  <h3>How to Validate Form Using JavaScript</h3>

<form method="post" id="registrationForm">

  <div class="flex-container">
  <div>
      <input type="text" id="firstName" placeholder="First Name">
      <div id="first-name-err"></div>
  </div>
  
  <div>
     <input type="text" id="lastName" placeholder="Last Name Name">
     <div id="last-name-err"></div>
  </div>

</div>

  
  <div class="flex-container">
  <div>
       <input type="email" id="emailAddress" placeholder="Email Address">
       <div id="email-err"></div>
  </div>
<div>
  <input type="text" id="mobileNumber" placeholder="Mobile Nubmer">
  <div id="mobile-number-err"></div>
  </div>
     
</div>

 <div class="flex-container">

  <div>
  <input type="password" id="password" placeholder="Password">
  <div id="password-err"></div>
  </div>
     
  <div>
      <input type="password" id="confirmPassword" placeholder="Confirm Password">
      <div id="confirm-password-err"></div>
  </div>
  </div>


<input type="submit">


</form>
</div>

</body>
</html>

2. Validate HTML Form with Javascript

Javascript  Form Validation Code –

Use the following javascript code just above the </body> tag. Otherwise, you can use it in the external js file.

<script type="text/javascript">


// First Name Validation
var firstName= document.getElementById("firstName");

var firstNameValidation=function(){

   firstNameValue=firstName.value.trim(); 
   validFirstName=/^[A-Za-z]+$/;
   firstNameErr=document.getElementById('first-name-err');

   if(firstNameValue=="")
   {
    firstNameErr.innerHTML="First Name is required";

   }else if(!validFirstName.test(firstNameValue)){
     firstNameErr.innerHTML="First Name must be only string without white spaces";
   }else{
     firstNameErr.innerHTML="";
     return true;
    
   }
}

firstName.oninput=function(){
   
   firstNameValidation();
}

  // Last Name Validation
  var lastName= document.getElementById("lastName");

  var lastNameValidation= function(){

   lastNameValue=lastName.value.trim(); 
   validLastName=/^[A-Za-z]+$/;
   lastNameErr=document.getElementById('last-name-err');

   if(lastNameValue=="")
   {
    lastNameErr.innerHTML="Last Name is required";

   }else if(!validLastName.test(lastNameValue)){
     lastNameErr.innerHTML="Last Name must be only string without white spaces";
   }else{
     lastNameErr.innerHTML="";
     return true;
   }
  }

lastName.oninput=function(){

   lastNameValidation();
}

 // Email Address Validation
 var emailAddress= document.getElementById("emailAddress");;
 var emailAddressValidation= function(){

  emailAddressValue=emailAddress.value.trim(); 
   validEmailAddress=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
   emailAddressErr=document.getElementById('email-err');

   if(emailAddressValue=="")
   {
    emailAddressErr.innerHTML="Email Address is required";

   }else if(!validEmailAddress.test(emailAddressValue)){
     emailAddressErr.innerHTML="Email Addre must be in valid formate with @ symbol";
   }else{
     emailAddressErr.innerHTML="";
     return true;
   }

 }

emailAddress.oninput=function(){

   emailAddressValidation();
}

 // Mobile Number Validation
 var mobileNumber= document.getElementById("mobileNumber");

 var mobileNumberValidation = function(){

   mobileNumberValue=mobileNumber.value.trim(); 
   validMobileNumber=/^[0-9]*$/;
   mobileNumberErr=document.getElementById('mobile-number-err');

   if(mobileNumberValue=="")
   {
    mobileNumberErr.innerHTML="Mobile Number is required";

   }else if(!validMobileNumber.test(mobileNumberValue)){
     mobileNumberErr.innerHTML="Mobile Number must be a number";
   }else if(mobileNumberValue.length!=10){

      mobileNumberErr.innerHTML="Mobile Number must have 10 digits";
   }
   else{
     mobileNumberErr.innerHTML="";
     return true;
   }

 }
mobileNumber.oninput=function(){

   mobileNumberValidation();
}


// Password Validation
var password= document.getElementById("password");;

var passwordValidation = function(){

  passwordValue=password.value.trim(); 
   validPassword=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
   
   passwordErr=document.getElementById('password-err');

   if(passwordValue=="")
   {
    passwordErr.innerHTML="Password is required";
   }else if(!validPassword.test(passwordValue)){
     passwordErr.innerHTML="Password must have at least one Uppercase, lowercase, digit, special characters & 8 characters";
   }
   else{
     passwordErr.innerHTML="";
     return true;
   }
}

password.oninput=function(){

   passwordValidation();

 confirmPasswordValidation();
   
}

// Confirm Password Validation
var confirmPassword= document.getElementById("confirmPassword");;

var confirmPasswordValidation=function(){
   confirmPasswordValue=confirmPassword.value.trim(); 
   
   confirmPasswordErr=document.getElementById('confirm-password-err');
   if(confirmPasswordValue==""){
       confirmPasswordErr.innerHTML="Confirm Password is required";
   }

  else if(confirmPasswordValue!=password.value){
     confirmPasswordErr.innerHTML="Confirm Password does not match";
   }
   else{
     confirmPasswordErr.innerHTML="";
     return true;
   }
}

confirmPassword.oninput=function(){

 confirmPasswordValidation();
   
}

// validation on submit


document.getElementById("registrationForm").onsubmit=function(e){

  
  firstNameValidation();
  lastNameValidation();
  emailAddressValidation();
  mobileNumberValidation();
  passwordValidation();
  confirmPasswordValidation();

  if(firstNameValidation()==true && 
    lastNameValidation()==true && 
    emailAddressValidation() == true && 
    mobileNumberValidation()==true && 
    passwordValidation()==true && 
    confirmPasswordValidation()==true){
    return true;
  }else{
    return false;
  }
}

</script>

 

You can use within the head section the following CSS code to design the HTML form

<style>
.flex-container {
  display: flex;}
.flex-container > div {
  width:46%;
  margin: 0px 10px;}
.html-form{
  width: 46%;
  background: #ffffff;
  padding: 10px;
  border: 1px solid #015ba9;}
input[type="submit"]{
  border: none;
  background: #015ba9;
  color: white;
  padding: 5px 35px;
  font-size: 20px;
  position: relative;
  left: 11px;}
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  height: 20px;
  background: white;
  border: 1px solid lightgray;
  margin: 5px 0px;
  padding: 5px;}
.html-form h3{
  text-align: center;
  font-size: 25px;
  margin: 0px;
  margin-bottom: 5px;
  color: #015ba9;
  border-bottom: 1px solid;
  margin-bottom: 15px}
#first-name-err, #last-name-err, #email-err, #mobile-number-err, #password-err, #confirm-password-err{
  color:red;
  font-size:13px;
}
</style>