CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
keshinpoint
keshinpoint

Reputation: 1001

Password confirmation validation not showing as intended

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
    }

    );

});

Upvotes: 2

Views: 498

Answers (2)

Praveen
Praveen

Reputation: 2419

.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

Upvotes: 3

thedeliciousmuffin
thedeliciousmuffin

Reputation: 814

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.

Upvotes: 1

Related Questions