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>

 


Web development
22nd Jul 2018 02:03:47 AM
Javascript jQuery HTML & CSS
6008

ShareurCodes

ShareurCodes is a code sharing site for programmers to learn, share their knowledge with younger generation.