Keshav Vasudevan Keshav Vasudevan - 22 days ago 5x
HTML Question

HTML5 custom validation for passwords

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


<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>
<a href="#"> Forgot password? </a>




$(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);

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 {
//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:
password requirements in the fiddle: 6 characters with atleast one number


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


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