How to validate confirm password using JavaScript ?

05 Apr, 2022
In almost every modern website we have seen a login and signup feature, which is surely an important service for both client and service provider. When a user signs up for a certain website they have to put a username a password, in order to enter password websites ask them to enter a password two times, this is for the user’s security, that whether the entered password is the same or not. In this article. We will create a confirmed password validating using HTML, CSS, and javascript.
Approach: We will make a simple login card in which there will be three inputs one for a username that could be anything for this article, 2nd will be for password and the third input will be confirmed password. First of all, we will type the password in both password input and confirm password input then we will compare both the input if they are the same or not, if the input is the same we will display “password matched” just below the confirm password input box if the input is not same we will then display “use the same password” in the red color so that the user will type the same password.
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() {             var pass = document.getElementById('pass').value;            var 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>
Output:
simranarora5sos
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS