How to validate confirm password using JavaScript ? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.ApproachHTML 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> Output: Comment More infoAdvertise with us Next Article How to Toggle Password Visibility using HTML and JavaScript ? I iamgaurav Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Methods JavaScript-Questions Similar Reads Password Validation Form Using JavaScript The password Validation form is used to check the password requirements such as the password must have at least one Uppercase, or lowercase, number, and the length of the password. We can also check this after submitting the form but it's not recommended. We can easily check before submitting the fo 4 min read Validate a password using HTML and JavaScript Validating a password using HTML and JavaScript involves ensuring that user-entered passwords meet certain criteria, such as length, complexity, or character types (e.g., uppercase, lowercase, numbers, and symbols). This process enhances security by enforcing strong password requirements before form 2 min read JavaScript - How to Validate Form Using Regular Expression? To validate a form in JavaScript, you can use Regular Expressions (RegExp) to ensure that user input follows the correct format. In this article, we'll explore how to validate common form fields such as email, phone number, and password using RegExp patterns.1. Validating an Email AddressOne of the 4 min read Create a Password Validator using Bootstrap & JavaScript A password validator assesses password strength by verifying if it meets predetermined criteria like length, inclusion of uppercase and lowercase letters, digits, and symbols. It ensures robust security measures for user authentication and data protection. PrerequisitesHTMLBootstrapJavaScriptApproac 3 min read How to Toggle Password Visibility using HTML and JavaScript ? In this article, we will learn about how to toggle password visibility using HTML and JavaScript. Passwords are those input types that take hidden inputs. It can be shown and hidden from the user by toggling its type between text and password. Approach The following approach will be implemented to t 2 min read How to Generate a Random Password using JavaScript? Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going 5 min read Like