Client-side Form Validation in Javascript

 

Hello readers, Today in this blog you’ll learn how to create client-side form validation in Javascript. Earlier, you learned to create a real-time pendulum clock with Javascript. I have also created a blog on other cool stuff about web development.

 

What is Form Validation?

Form validation is the process of checking errors and vulnerabilities during the filling and submitting of the form data to the server. Form validation can be classified into three types, they are:-

1. Client-side Validation,
2. Server-side Validation and
3. Real-time Validation

Creating such a form validation will increase your skills and potential in the field of web development. Form validation is one of the very important and compulsory parts of the website that contains form inputs. Form validation is used to be safe from SQL Injection, and Cross Site Scripting, and to inform the user about the filled data before or during the form submission.

Today I’m going to explain Client-side validation. I will also show you how we can do client-side form validation using Javascript.

What is Client Side Validation?

It is an initial check of data filled by the user and tells the user to fix their filled data in a way that webmasters are expecting. Client-side form validation is a good practice to interact with the users and tell them what should they do during filling out the form. The user can fix the problems instantly. If there is no client-side validation, first the data will be sent to the server and then processes and if the server found problems then it will throw an error message then the user can refill the correct data which causes the delay and make the user experience bad. So for the sake of user experience, we have to use client-side validation.

 

Today I’m going to create some functions for client-side validation. At first, I added an eventListener() which will observe the input event and inside the eventListener I have called a function inputs(). After that, I created a function named inputs() which will check all the input data and if the input field is blank it will show an error message, also it will check if the email is valid or invalid and at last it will check whether the inserted passwords are same or not. If there are any mistakes or errors it will show the error message and the border of the input field will be turned to red also the red circled exclamation mark will be displayed at the right of the input field. If the user has filled correct data the border of the input field will be turned green and a tick mark with a green circled background appears on the right side of the input field. That’s all we have to do for the client-side validation.

 

If the input is wrong or contains an error

 

If the input has no issue and is ready for submission

 

 

Code for checking the Email Validation

function isEmail(email){ return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

 

If you’re feeling difficult to understand what I am saying. You can watch a preview video of this program (Client-side Form Validation in Javascript).

 

You Might Also Like

• Real-Time Pendulum Clock with JavaScript
• Contact US Page in HTML & CSS        
• User Registration Form in PHP & MYSQL  
• Show/Hide Password Toggle in JavaScript                                                                                                                                   

Video Preview of Client-side Form Validation in Javascript

All this page design is based on CSS and the validation is based on Javascript. If you’re a beginner you can also create this type of client-side form validation. If you like this program (Client-side Form Validation in Javascript) and want to get source code. You can easily get the source code of this program. To get the source code you just need to scroll down.

Client-side Form Validation in Javascript [Source Codes]

To create this program (Client-side Form Validation in Javascript), you need to create three files one HTML file, one CSS file & one Javascript file. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"> <title>Javascript Form Validation</title> </head> <body> <div class="container"> <form action="" method="POST" id="form"> <h3>Register Here</h3> <div class="form-control"> <input type="text" name="name" id="name" placeholder="Full Name" autocomplete="off"> <i class="fas fa-check-circle success-icon"></i> <i class="fas fa-exclamation-circle error-icon"></i> <span></span> </div> <div class="form-control"> <input type="text" name="email" id="email" placeholder="Email" autocomplete="off"> <i class="fas fa-check-circle success-icon"></i> <i class="fas fa-exclamation-circle error-icon"></i> <span></span> </div> <div class="form-control"> <input type="password" name="pass" id="pass" placeholder="Password" autocomplete="off"> <i class="fas fa-check-circle success-icon"></i> <i class="fas fa-exclamation-circle error-icon"></i> <span></span> </div> <div class="form-control"> <input type="password" name="c_pass" id="c_pass" placeholder="Confirm Password" autocomplete="off"> <i class="fas fa-check-circle success-icon"></i> <i class="fas fa-exclamation-circle error-icon"></i> <span></span> </div> <button>Submit</button> </form> </div> <script src="validate2.js"></script> </body> </html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

*{ margin: 0; padding: 0; box-sizing: border-box; } .container{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(1, 17, 59); } form{ width: 300px; background-color: #fff; padding: 0px 20px 20px 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); } form h3{ padding: 30px 0px 10px 0px; border-bottom: 1px solid #ddd; } form .form-control{ display: flex; position: relative; } .form-control input{ margin-top: 30px; padding: 10px 5px; width: 100%; outline: none; } input:focus{ border: 1px solid #006eff; box-shadow: 0px 0px 10px -3px #006eff8a; } .form-control i{ position: absolute; right: 10px; top: 60%; visibility: hidden; } .form-control span{ position: absolute; top: 100%; color: #ff0000; visibility: hidden; } form button{ padding: 10px; border: none; margin-top: 20px; border-radius: 5px; width: 100%; background-color: #00ff2a; color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; } form .success .success-icon{ color: #00ff2a; visibility: visible; } form .success input{ border: 1px solid #00ff2a; } form .error .error-icon{ color: #ff0000; visibility: visible; } form .error input{ border: 1px solid #ff0000; } form .error span{ visibility: visible; }

At last, create a Javascript file with the name validate.js and paste the given code into your Javascript file. Note it, you’ve to create a file with a .js extension.

JavaScript

const form = document.getElementById('form'); const user_name = document.getElementById('name'); const email = document.getElementById('email'); const pass = document.getElementById('pass'); const c_pass = document.getElementById('c_pass'); form.addEventListener('input', (e) =>{ e.preventDefault(); inputs(); }); function inputs(){ var nameVal = user_name.value; var emailVal = email.value; var passVal = pass.value; var c_passVal = c_pass.value; if(nameVal === ""){ getError(user_name, "Name can't be Empty"); }else{ getSuccess(user_name); } if(emailVal === ""){ getError(email, "Email is required"); }else if(!isEmail(emailVal)){ getError(email, "Invalid Email") }else{ getSuccess(email); } if(passVal === ""){ getError(pass, "Password is required"); }else{ getSuccess(pass); } if(c_passVal === ""){ getError(c_pass, "Confirm your password"); }else if(c_passVal != passVal){ getError(c_pass, "Passwords donot match") }else{ getSuccess(c_pass); } } function getError(input, message){ const formControl = input.parentElement; const span = formControl.querySelector('span'); span.innerHTML = message; formControl.className = "form-control error"; } function getSuccess(input){ const formControl = input.parentElement; formControl.className = "form-control success"; } function isEmail(email){ return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

That’s all, now you’ve successfully created a Client-side Form Validation in Javascript. If your code does not work or you’ve faced any errors/problems then please do not hesitate to comment down your problems. If you feel this article had helped you, please share it with your friends.