Password confirmation validation not showing as intended

Question

This is an extension of the the question I had asked earlier today (it's still unsolved, any help is very much appreciated). I have seen a lot of questions regarding this on stack overflow, and my code is based on something I found on a tutorial website.

I have 2 password forms which I wish to validate. I just want to submit it if they match. Here's my code-

<li>
      <div class="input-group col-xs-5 pw">
       <input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />                                
      </div>
  </li>


<li>
   <div class="input-group col-xs-5">
      <input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
       <span class="input-group-btn">
               <button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em>  </button>
            </span>
       </div>
                            </li>

My javascript-

$(document).ready(function () {
    $('#pw-btn').click( function() {

        var pwd1 = document.getElementById("new-pw").value;
        var pwd2 = document.getElementById("cnfrm-pw").value;

        if (pwd1 != pwd2) 
        {
            document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
        }

        else {
            document.getElementById("cnfrm-pw").setCustomValidity('');   
            //empty string means no validation error        
        }

    }

    );

});

I am expecting an HTML5 validation form which tells me the passwords dont match, something like this. Nothing happens however. Is there a mistake in my approach to custom validation? Thank you in advance all, very grateful for the help and advise.

ANSWER

I used the following code to get this working. It was a modification of the submitted answers. Thanks for all the help guys!

HTML:

<form action="#" id="f" method="post">
   <li>
      <div class="input-group col-xs-5 pw">
         <input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*\d)(.{6,})" />
      </div>
        </li>


        <li>
                <div class="input-group col-xs-5">
        <input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
   <span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn">  </button>
                        </span>
                </div>
           </li>
     </form>

JS

$(document).ready(function () { //This confirms if the 2 passwords match   

    $('#f').on('keyup', '.cnfrm-pw', function (e) {

        var pwd1 = document.getElementById("new-pw").value;
        var pwd2 = document.getElementById("cnfrm-pw").value;

        if (pwd1 != pwd2) {
            document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
        }

        else {
            document.getElementById("cnfrm-pw").setCustomValidity("");
            //empty string means no validation error        
        }
        e.preventDefault();  //would still work if this wasn't present
    }

    );

});

@PraveenI have made an update to my question specifying the problem. Thanks — keshinpoint, Mar 06 '16 at 05:02

score 3 · Answer 1 · answered Mar 06 '16 at 05:12

.setCustomValidity tooltip will trigger only when the form is submitting.

Javascript

$(document).ready(function() {
  $('#f').submit(function(e) {

      var pwd1 = document.getElementById("new-pw").value;
      var pwd2 = document.getElementById("cnfrm-pw").value;

      if (pwd1 != pwd2) {
        document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
      } else {
        document.getElementById("cnfrm-pw").setCustomValidity('');
        //empty string means no validation error        
      }
      e.preventDefault();
    }

  );

});

HTML

<form action="#" id="f"><li>
  <div class="input-group col-xs-5 pw">
    <input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
  </div>
</li>


<li>
  <div class="input-group col-xs-5">
    <input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
    <span class="input-group-btn">
               <input type="submit" />
            </span>
  </div>
</li>
</form>

Have a look: http://codepen.io/anon/pen/WwQBZy

Hi @Praveen, I noticed that you have to click the 'submit' button twice to get the validation error message. This occurred in my code as well as the one you submitted. Is there a way to do so with just one click? — keshinpoint, Mar 06 '16 at 15:48
Hi @Praveen, another issue - if the end user types in the same password in the 'confirm password' field as he did the password, he can submit the form. However, if the user gets it wrong once, and then types in the same password, the validation message still shows and the user can't submit the password. — keshinpoint, Mar 06 '16 at 22:40

score 1 · Answer 2 · answered Mar 06 '16 at 05:12

I believe you're missing required attribute:

<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />

Notice the required at the end.

Also, if you want to set a minimum:

<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />

As for the submitting the form, when the validation passes, you could submit the form using submit() function available in the Web API. You can read about it here.

Thanks for the answer, Praveen's answer worked like a charm. Do check it out as well :) — keshinpoint, Mar 06 '16 at 18:13

Password confirmation validation not showing as intended

2 Answers2