How to validate confirm password using JavaScript ?

Last Updated : 29 Jul, 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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Account</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        .form-container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .error {
            color: red;
            font-size: 0.875rem;
        }
        .success {
            color: green;
            font-size: 0.875rem;
        }
        .submit-btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 1rem;
            opacity: 0.6; /* Initially disabled */
            pointer-events: none; /* Initially disabled */
        }
        .submit-btn.enabled {
            opacity: 1; /* Enabled */
            pointer-events: auto; /* Enabled */
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Create Account</h2>
        <form id="registrationForm">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter Username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter Password" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" required>
                <span id="passwordError" class="error"></span>
            </div>
            <button type="submit" class="submit-btn" id="submitBtn">Submit</button>
        </form>
    </div>

    <script>
        document.getElementById('registrationForm').addEventListener('input', function () {
            validateForm();
        });

        function validateForm() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const submitBtn = document.getElementById('submitBtn');
            const errorElement = document.getElementById('passwordError');

            let isValid = true;

            if (!username || !password || !confirmPassword) {
                isValid = false;
            }

            if (password !== confirmPassword) {
                errorElement.textContent = 'Passwords do not match';
                errorElement.classList.remove('success');
                errorElement.classList.add('error');
                isValid = false;
            } else {
                errorElement.textContent = 'Passwords match';
                errorElement.classList.remove('error');
                errorElement.classList.add('success');
            }

            if (isValid) {
                submitBtn.classList.add('enabled');
                submitBtn.disabled = false;
            } else {
                submitBtn.classList.remove('enabled');
                submitBtn.disabled = true;
            }
        }
    </script>
</body>
</html>