Matching password and confirm password values is one of the quite commonly required functionality in many applications. While there are so many different ways to do this which also depends on the requirements of the application, we will try to implement in the following way in this small JavaScript task.

What we are going to implement ?

We will have two input elements of type password. When the user starts entering in confirm password input element, we will compare both password and confirm password and show the confirm password input element with red border when they are not matching and green when they are matching. We will also show a message notifying the user that the both passwords are not matching.

Preview:

Implementing Password and Confirm Password matching functionality in JavaScript without any library or framework

Initial Setup:

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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

    <title>Document</title>
</head>

<body class="container">

    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password">
    </div>
    <div class="mb-3">
        <label for="confirmPassword" class="form-label">Confirm Password</label>
        <input type="password" class="form-control" id="confirmPassword">
    </div>
    <div class="hide-error" id="errorMessage"> Passwords did not match </div>

    <script src="index.js"></script>
</body>

</html>

CSS:

.show-error{
    color: red;
    display: block;
}

.hide-error{
    display: none;
}

In the above code, we have two input elements one for password and another for confirm password. We also have a div element to display the error message when passwords are not matching. We added hide-error CSS class to this element to hide it initially and display the message only when the user enters in confirm password input element and when the passwords are not matching.

JavaScript:

let passwordsMatching = false;
let isConfirmPasswordDirty = false;
let password = document.getElementById('password');
let confirmPassword = document.getElementById('confirmPassword');
let errorMessage = document.getElementById('errorMessage')

confirmPassword.addEventListener('keyup', () => {
    isConfirmPasswordDirty = true;
    if (password.value === confirmPassword.value) {
        passwordsMatching = true;
        confirmPassword.classList = 'form-control is-valid'
        errorMessage.classList = 'hide-error'
        console.log(confirmPassword.classList)
    } else {
        passwordsMatching = false;
        confirmPassword.classList = 'form-control is-invalid'
        errorMessage.classList = 'show-error'
        console.log(confirmPassword.classList)
    }
})

In the above code, whenever user enters a value in the confirm password input element and key comes up (keyup event), we are comparing password and confirm password values. When they are not equal, we are adding¬† ‘form-control is-invalid’ bootstrap classes to the element and also making the div element visible.