How to validate confirm password using JavaScript ?

Last Updated : 08 Jan, 2024

In almost every modern website we have seen a login and signup feature, which is surely an important service for both the client and the service provider. When a user signs up for a certain website they have to put in a username a password, to enter the password websites ask them to enter a password two times, this is for the user’s security, whether the entered password is the same or not. In this article. We will create a confirmed password validation using HTML, CSS, and JavaScript.

Approach

HTML Structure:
- The HTML structure defines a simple form with fields for a username, password, and password confirmation. It also includes styling for a centered and styled UI using Flexbox.
Password Confirmation Validation:
- JavaScript function validate_password() is triggered on every keyup event in the password confirmation field.
- It compares the password and confirmation password values and provides visual feedback, disabling the submit button if the passwords don’t match.
Visual Feedback:
- Visual feedback for password match/mismatch is displayed using different colors and symbols in the wrong_pass_alert span.
Submit Button Functionality:
- The wrong_pass_alert() function is called when the submit button is clicked.
- It checks if both the password and confirmation password fields are filled. If yes, it shows an alert with a success message; otherwise, it prompts the user to fill in all fields.
Styling and UI:
- CSS styles are applied to create a visually appealing UI, with a centered form, rounded input fields, and a submit button. Hover effects and box shadows enhance the user experience.

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html>
 
<head>
    <title>Confirm Password validation using javascript</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: rgb(50, 57, 78);
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .main {
 
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: rgb(34, 34, 34);
            height: 400px;
            width: 300px;
            margin-top: 15%;
            border-radius: 10px;
            box-shadow: 2px 4px 6px rgb(0, 0, 0);
        }
 
        .pass {
            display: flex;
            flex-direction: column;
        }
 
        .image h2 {
            color: rgb(2, 149, 27);
            font-size: 30px;
            font-family: sans-serif;
            margin-bottom: 50px;
        }
 
        .username input,
        .pass input {
            font-family: sans-serif;
            margin-bottom: 20px;
            height: 30px;
            border-radius: 100px;
            border: none;
            text-align: center;
            outline: none;
        }
 
        .submit_btn {
            height: 30px;
            width: 80px;
            border-radius: 100px;
            border: none;
            outline: none;
            background-color: rgb(0, 179, 95);
            margin-top: 15px;
        }
 
        .submit_btn:hover {
            background-color: rgba(0, 179, 95, 0.596);
            color: rgb(14, 14, 14);
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="image">
            <h2>GeeksforGeeks</h2>
        </div>
        <div class="username">
            <input type="text"
                   name="username"
                   placeholder="Dummyuser">
        </div>
        <div class="pass">
            <input id="pass"
                   type="password"
                   name="pass"
                   placeholder="Enter Password"
                   required"">
            <input id="confirm_pass"
                   type="password"
                   name="confirm_pass"
                   placeholder="Confirm Password" required
                   onkeyup="validate_password()">
        </div>
        <span id="wrong_pass_alert"></span>
        <div class="buttons">
            <button id="create"
                    class="submit_btn"
                    onclick="wrong_pass_alert()">
                Submit
            </button>
        </div>
    </div>
    <script>
        function validate_password() {
 
            let pass = document.getElementById('pass').value;
            let confirm_pass = document.getElementById('confirm_pass').value;
            if (pass != confirm_pass) {
                document.getElementById('wrong_pass_alert').style.color = 'red';
                document.getElementById('wrong_pass_alert').innerHTML
                    = '☒ Use same password';
                document.getElementById('create').disabled = true;
                document.getElementById('create').style.opacity = (0.4);
            } else {
                document.getElementById('wrong_pass_alert').style.color = 'green';
                document.getElementById('wrong_pass_alert').innerHTML =
                    '🗹 Password Matched';
                document.getElementById('create').disabled = false;
                document.getElementById('create').style.opacity = (1);
            }
        }
 
        function wrong_pass_alert() {
            if (document.getElementById('pass').value != "" &&
                document.getElementById('confirm_pass').value != "") {
                alert("Your response is submitted");
            } else {
                alert("Please fill all the fields");
            }
        }
    </script>
</body>
</html>