Real time password matching using jQuery

• Virlif
• January 21, 2024November 8, 2024
• 0

Real time password matching using jQuery: This is a small snippet I used in my project for real time password matching. Please note that the below code only check whether password of password input field and confirm password input field match when we start typing in confirm password field and doesn’t prevent from the form submission.

The javascript code is given below,

<script>
    $(document).ready(function(){
        $("#ConfirmPassword").keyup(function(){
             if ($("#Password").val() != $("#ConfirmPassword").val()) {
                 $("#msg").html("Password do not match").css("color","red");
             }else{
                 $("#msg").html("Password matched").css("color","green");
            }
      });
});
</script> 

The HTML code is given below,

<div class="col-sm-4">
    <div class="form-group"><label>Password</label>
        <input type="password"   id="Password"   class="form-control input-sm" required/>
    </div>
</div>
                                                              
<div class="col-sm-4">
    <div class="form-group"><label>Confirm Password</label>
        <input type="password" id="ConfirmPassword"  class="form-control input-sm" required/>
    </div>
    <div id="msg"></div>
</div>

Here’s a detailed explanation of your code.

HTML Code Explanation

The HTML portion sets up two input fields for password entry and displays a message indicating whether the passwords match.

1. <div class="col-sm-4">: This <div> creates a container with the class col-sm-4, often used in Bootstrap to specify a responsive column size (4 out of 12 columns on small devices).
2. Password Field:
   • <div class="form-group"><label>Password</label>: Creates a <div> container with the class form-group (a Bootstrap class that helps in styling form fields) and a <label> for the password field.
   • <input type="password" id="Password" class="form-control input-sm" required/>: This is the input field where users enter their password.
     • type="password": Ensures that characters entered are obscured.
     • id="Password": Sets the element’s ID as Password, allowing it to be selected in JavaScript.
     • class="form-control input-sm": Adds Bootstrap classes for styling.
     • required: Specifies that this field is mandatory.
3. Confirm Password Field:
   • Similar structure to the Password field, but:
     • id="ConfirmPassword": Sets the ID to ConfirmPassword so it can be uniquely referenced in JavaScript.
   • <div id="msg"></div>: This empty <div> will display the message regarding whether the passwords match. It has an id of msg so it can be easily selected and updated in the script.

JavaScript Code Explanation

The JavaScript (jQuery) code waits for the page to load, then checks if the two password fields have matching values.

1. $(document).ready(function(){ ... });: The $(document).ready() function ensures that the code inside runs only after the entire HTML document is fully loaded.
2. $("#ConfirmPassword").keyup(function(){ ... });: This line selects the #ConfirmPassword input and attaches a keyup event listener to it.
   • keyup triggers every time the user releases a key inside the Confirm Password field, allowing for real-time password validation.
3. if ($("#Password").val() != $("#ConfirmPassword").val()) { ... }: Inside the event handler, this if statement checks whether the values of the Password and ConfirmPassword fields are different.
   • $("#Password").val(): Retrieves the value of the Password field.
   • $("#ConfirmPassword").val(): Retrieves the value of the ConfirmPassword field.
   • If they are not equal, it means the passwords don’t match.
4. $("#msg").html("Password do not match").css("color","red");: If the passwords don’t match, this line updates the #msg div with the text “Password do not match” and changes the text color to red.
5. else { $("#msg").html("Password matched").css("color","green"); }: If the passwords match, this code updates #msg with the text “Password matched” and changes the color to green. This is the success message indicating both passwords are identical.

Summary

• HTML: Sets up two password fields and a message area.
• JavaScript: Adds an event to check if the passwords match in real-time as the user types in the Confirm Password field, updating the message and color accordingly.

This code uses basic jQuery functions ($(document).ready, .keyup, .val, .html, and .css), which are supported by all versions of jQuery 1.0 and later. However, for optimal compatibility and security, it’s generally recommended to use at least jQuery 1.12.4 (the final version of jQuery 1.x) or jQuery 3.5.1 (if using jQuery 3.x).

• jQuery 1.12.4: Suitable for older projects or environments that need support for Internet Explorer 6–8.
• jQuery 3.5.1 or newer: Recommended for modern projects, as it has better performance, security, and compatibility with newer browsers.

Using any version from 1.12.4 and up to the latest jQuery 3.x release should work smoothly for this code.

Related Articles:
1. Select all checkbox using jquery

Select all checkbox using jquery