Form Validation with JavaScript Example

In this blog, we will learn 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. client-side form validation

Form Validation with JavaScript Before Submit

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 letters 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();
}

How to install Angular 8 9 10 in your system

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 –


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.

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>

Leave a Comment

Show Buttons
Hide Buttons