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

Answer 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