HTML5 benutzerdefinierte Validierung für Passwörter

Question

Ich bin auf der Suche nach einer HTML5 benutzerdefinierten Validierung Nachricht, wenn ich 2 Passwörter eingeben, die nicht übereinstimmen.

Hier ist mein HTML und 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 


}); 

}); 

Das Problem ist, wird die Nachricht immer dann ausgelöst, auch wenn die Passwörter Spiel tun. Bitte hilf mir, die Nachricht nur auszulösen, wenn die Passwörter nicht übereinstimmen, und erlaube mir, sie sicher zu übermitteln, wenn sie es tun.

JS Geige: https://jsfiddle.net/kesh92/a8y9nkqa/ Passwort Anforderungen in der Geige: 6 Zeichen mit atleast eine Nummer

Answer 1

jQuery get() die dom Elemente jeder gibt ... sie nie

gleich sein können

Sie wollen Werte vergleichen .

Versuchen

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

Um

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

Hinweis Ändern Sie jedoch, dass Sie auch jetzt müssen leere Werte betrachten, da man über Reiten validty sind