June 15, 2020

How to Check If Passwords Match in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if passwords match in javascript. You only need such a mechanism when a user is about to sign up on your website or about to change the password.

It is a common convention to verify if the password entered by the user is actually the one he wants to keep because sometimes a user does make mistakes while entering a password and it is not possible for him to verify it due to the masking of the password field.

This simple problem can be solved by 2 solutions. One solution is to provide a checkbox next to the input field so that depending upon the state of the checkbox, a user can mask or unmask the password field. Another solution is to have 2 input fields to enter the same password and match their values.

As you already know, to create a password field, we have to set the type of input element to password and to get its value, we can make use of the value property.

In the following example, we have 2 input fields. We will simply enter the password in both the input fields and compare them. Depending upon the result of the comparison, we will display some text in the h1 element. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, input, and h1). The div element is just a wrapper for the rest of the elements.
By convention, the value of the type attribute for both input elements is set to password.
The h1 element has “Result” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="password" placeholder="Enter Password" id="pass1">
        <input type="password" placeholder="Confirm Password" id="pass2">
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input {
    display: block;
    padding: 10px 20px;
    margin-top: 10px;
}

Javascript

We have selected both the input elements and h1 element using the document.querySelector() method and stored them in the pass1, pass2, and result variables respectively.
We have a created custom method checkPassword(). In this method, we are simply taking values of both the input elements and comparing them by using if statement. Depending upon the result, we will display “Matching” or “Not Matching” in the h1 element using the innerText property.
We have attached a keyup event listener to both the input elements.
In the first password field event handler function, we are checking the length of the text that is entered in the second password field using if statement and length property. If the length is not equal to 0, we are calling the checkPassword() method to do the comparison.
In the second password field event handler function, we are using checkPassword() as our event handler function.

let pass1 = document.querySelector('#pass1');
let pass2 = document.querySelector('#pass2');
let result = document.querySelector('h1');


function checkPassword () {
    result.innerText = pass1.value == pass2.value ? 'Matching' : 'Not Matching';
}

pass1.addEventListener('keyup', () => {
    if (pass2.value.length != 0) checkPassword();
})

pass2.addEventListener('keyup', checkPassword);

You May Also Like: