HTML5 custom validation for passwords

Question

I'm looking to create an HTML5 custom validation message when I enter 2 passwords which don't match.

Here's my HTML and JQuery

HTML:

<form class="form-group main-settings-form" id="main-settings-form-password">

    <input class="form-control main-settings-form-input password-main" type="password" placeholder="Enter new password" id="new-password" pattern='(?=.*\d)(.{6,})' required>

    <input class="form-control main-settings-form-input" type="password" placeholder="Retype new password" id="confirm-password" pattern='(?=.*\d)(.{6,})' required>

    <div class="main-settings-form-buttons">
        <button type="button" class="btn btn-danger settings-edit-cancel">Cancel</button>
        <button class="btn btn-success" type="submit">Save</button>
        <br>
        <br>
        <a href="#"> Forgot password? </a>

    </div>

</form>

JS:

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

    $('#confirm-password').on('keyup', function (e) {

        var pwd1 = $("#new-password").get(0);
        var pwd2 = $("#confirm-password").get(0);
         pwd2.setCustomValidity("");

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

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


});

});

The problem is, the message is always triggered even if the passwords do match. Please help me trigger the message only when the passwords dont match, and be allowed to safely submit when they do.

JS fiddle: https://jsfiddle.net/kesh92/a8y9nkqa/ password requirements in the fiddle: 6 characters with atleast one number

You should be using .val() instead of .get(0) to obtain the value of the password field(s). — Terry
– Terry, Commented Oct 3, 2016 at 0:24

charlietfl · Accepted Answer · 2016-10-03 00:30:59Z

1

jQuery get() returns the dom elements of each...they can never be equal

You want to compare values.

Try changing

if (pwd1 != pwd2) { //compare 2 dom nodes

To

if ( pwd1.value != pwd2.value) { //compare 2 dom node values

Note however that you also need to now consider empty values since you are over riding validty

edited Oct 3, 2016 at 0:30

answered Oct 3, 2016 at 0:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

keshinpoint Over a year ago

This works perfectly! Thanks a ton! I have a follow up question. If I changed my original code to var pwd1 = $("#new-password").value; and var pwd2 = $("#confirm-password").value;and keep everything else the same, shouldn't it work? Because it doesn't, so just curious as to why. Thanks!

charlietfl Over a year ago

2 reasons...you are trying to manage validity properties of those elements later on and also $().value is not a jQuery property....jQuery uses val(). Suggest you don't intermingle jquery and dom native methods so much. It will confuse you

charlietfl Over a year ago

or use a battle tested validation script and don't re-invent the wheel

Collectives™ on Stack Overflow

HTML5 custom validation for passwords

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related