Пользовательская проверка HTML5 для паролей

Question

Я ищу, чтобы создать специальное сообщение проверки HTML5 при вводе 2 паролей, которые не совпадают.

Вот мой HTML и 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 


}); 

}); 

Проблема заключается в том, сообщение всегда срабатывают, даже если пароли сделать матч. Пожалуйста, помогите мне вызвать сообщение только тогда, когда пароли не совпадают, и им будет разрешено безопасно отправлять, когда они это сделают.

JS скрипка: https://jsfiddle.net/kesh92/a8y9nkqa/ требование к паролю в скрипкой: 6 символов с по крайней мере один номером

Answer 1

JQuery get() возвращает DOM элементов каждого ... они никогда не могут быть равны

Вы хотите сравнить значение ,

Попробуйте изменить

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

К

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

Заметим, однако, что вы также должны Рассмотрим теперь пустые значения, так как вы над верхом validty