Checking password match while typing

Question

I have a registration form with  password  and  confirm password  input fields  I want to check if the  confirm password  matches the  password  while the user is typing it and give the appropriate message  So I tried to do this   This is the HTML    lt div class  td  gt       lt input type  password  id  txtNewPassword    gt   lt  div gt   lt div class  td  gt       lt input type  password  id  txtConfirmPassword  onChange  checkPasswordMatch       gt   lt  div gt       lt div class  registrationFormAlert  id  divCheckPasswordMatch  gt   lt  div gt    And this is the checkPasswordMatch   function   function checkPasswordMatch         var password       txtNewPassword   val        var confirmPassword       txtConfirmPassword   val         if  password    confirmPassword              divCheckPasswordMatch   html  Passwords do not match         else             divCheckPasswordMatch   html  Passwords match         That didn t validate while typing  only when user leaves the field   I tried to use onKeyUp instead of onChange - also didn t work   So how can it be done   Thank you

User · Answer

if we use bootstrap our text will be green or red depending on the result

HTML

<div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">New Password</span>
<input type="password" id="txtNewPassword" class="form-control">     
        </label>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <label class="form-group d-block mb-0">
        <span class="text-secondary d-block font-weight-semibold mb-1">Confirm Password
        </span>
        <input class="form-control" type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();">   
            </label>
        </div>
        <div class="registrationFormAlert" id="divCheckPasswordMatch"></div>

CSS

.text-success {
    color: #28a745;
}
.text-danger {
    color: #dc3545;
}

JS

function checkPasswordMatch() {
        var password = $("#txtNewPassword").val();
        var confirmPassword = $("#txtConfirmPassword").val();

        if (password != confirmPassword)
            $("#divCheckPasswordMatch").html("Passwords do not match!").addClass('text-danger').removeClass('text-success');

        else
            $("#divCheckPasswordMatch").html("Passwords match.").addClass('text-success').removeClass('text-danger');
    }

User · Answer

txtConfirmPassword   keyup function      if   this  val          txtNewPassword   val   substr 0   this  val   length      alert  confirm password not match

User · Answer

The onkeyup event does  work  as you intend    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html gt   lt head gt  lt title gt  lt  title gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script type  text javascript  gt  lt  -- function checkPasswordMatch         var password       txtNewPassword   val        var confirmPassword       txtConfirmPassword   val         if  password    confirmPassword              divCheckPasswordMatch   html  Passwords do not match         else             divCheckPasswordMatch   html  Passwords match         -- gt  lt  script gt   lt  head gt   lt body gt    lt div class  td  gt       lt input type  password  id  txtNewPassword    gt   lt  div gt   lt div class  td  gt       lt input type  password  id  txtConfirmPassword  onkeyup  checkPasswordMatch       gt   lt  div gt       lt div class  registrationFormAlert  id  divCheckPasswordMatch  gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

Here s a working jsfiddle  http   jsfiddle net dbwMY   Things to note    validate event handler bound within the document ready function - otherwise the inputs won t exist when the JS is loaded using keyup   In saying that  validation is a solved problem there are frameworks that implement this functionality   http   bassistance de jquery-plugins jquery-plugin-validation   I d suggest using one of these rather than reimplementing Validation for every app you write

User · Answer

Probably invalid syntax in your onChange event  I avoid using like this  within the html  as I think it is messy and it is hard enough keeping JavaScript tidy at the best of times    I would rather register the event on the document ready event in javascript  You will also definitely want to use keyup event too if you want the validation as the user is typing     document  ready function             txtConfirmPassword   keyup checkPasswordMatch         Here is a working example    Personally I would prefer to do the check when either password field changes  that way if they re-type the original password then you still get the same validation check     document  ready function             txtNewPassword   txtConfirmPassword   keyup checkPasswordMatch         Here is a working example

User · Answer

The problem in this case is that onchange-event does not fire until the input looses focus  so you will probably want to listen for the keyup-event instead  which is fired on every keystroke    Also  I would prefer not using inline-javascript  but rather catch the event using jQuery instead       txtConfirmPassword   keyup checkPasswordMatch

User · Answer

function             txtConfirmPassword   keyup function             var password       txtNewPassword   val                divCheckPasswordMatch   html password      this  val                  Passwords match                  Passwords do not match                             Demo here

[javascript] Checking password match while typing

Examples related to javascript

Examples related to jquery