In this article you'll learn confirm password validation using JavaScript .A simple yet effective way to improve the security of your website by ensuring that users enter the same password twice.
You may have seen the in signup form or registration form that they have confirm password field that check except same value as password field have. In this article we going to check the password and confirm password is same or not using javascript.
But its just the frontend you should validate the password and confirm password at the backend too. Before storing it to database.
Confirm Password Validation Using JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
Steps for confirming the passwords using JavaScript.
Step 1: Create a basic design for confirm password validation.
First we'll create basic design for confirming password. So we'll create two input fields (for create password and confirm the created password) and one button.
And also add element for displaying error messages (when confirm password not match with created password) and success message (when created password and confirm password are match).
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">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<p class="success_message"></p>
<input type="text" class="password" placeholder="Password">
<input type="text" class="confirm_password" placeholder="Confirm-Password">
<p class="error_message"></p>
<button type="submit" class="button">Submit</button>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #b94cbe96;
display: flex;
align-items: center;
justify-content: center;
}
.box{
background-color: #fff;
height: auto;
width: 350px;
padding: 20px 20px;
}
.box .password , .confirm_password{
width: 100%;
outline: none;
border-width: 0px 0px 2px 0px;
padding: 6px 0px;
font-size: 25px;
margin-top: 15px;
}
.success_message{
font-size: 24px;
text-align: center;
margin: 11px 0px;
color: #3be229;
}
.error_message{
font-size: 18px;
text-align: left;
margin: 3px 0px;
color: red;
}
.button{
font-size: 22px;
padding: 8px 11px;
background-color: #1f1c8f;
border: none;
color: #fff;
float: right;
margin-top: 10px;
cursor: pointer;
}
Output:
Simple design is completed. Let's add functionality to check confirm password is same as password field (create password field) or not, using JavaScript.
Step 2: Confirm password validation with JavaScript.
First let's define variable.
JavaScript
let password = document.querySelector('.password');
let confirm_password = document.querySelector('.confirm_password');
let success_message = document.querySelector('.success_message');
let error_message = document.querySelector('.error_message');
let button = document.querySelector('.button');
Now we'll add onclick function to button. That check the password and confirm password value matching or not. We are just matching confirm password value with password (create password) value. If matched a success message appears on top and if not matched error message appears below the confirm password input field.
Remember validating confim password is easy by comparision operator (==). You can add if condition by passing condition of confirm_password.value == password.value.
But the main point is in create password value. It should be strong. If you want strong password then you can make user to create strong password by adding condition to create password input field like password must be greater than 8 characters, includes uppercase, lowercase and special characters and numbers (and condition that you think that this conditions makes a password strong.).
Here in this blog post we only talk about confirm password validtion with created password value. A strong password creation is improtant first. I have shared blog post in which you can check live password strength using JavaScript. Its based on similar to above mentioned conditions (like password must be greater than 8 characters, includes uppercase, lowercase and special characters and numbers).
JavaScript
button.onclick = function () {
if (password.value.length != 0) {
if (confirm_password.value.length != 0) {
if (password.value == confirm_password.value) {
error_message.innerText = '';
success_message.innerText = 'success';
} else {
error_message.innerText = 'Confirm password must match to your password';
success_message.innerText = '';
}
}
else {
error_message.innerText = 'Confirm password cannot be blank';
}
} else {
error_message.innerText = 'Password cannot be blank';
}
}
Output:
You may like:
- How to create a simple random password generator using JavaScript.
- How to show and hide password with checkbox using JavaScript.
- How to show and hide password with image using JavaScript.
- How to create a live password strength indicator using JavaScript.
- How to create animated input field using HTML, CSS & JavaScript.
So thats it confirm password validation is ready using JavaScript. If you have any question or suggestion you can write them in the comment section.
Share your thoughts.