2016-07-29 4 views
0

Ich schrieb mehrere Funktionen, um zu überprüfen, ob die beiden Passwörter gleich sind. Ich gebe zuerst zwei Passwörter ein. Wenn ich aus dem Feld "Passwort verifizieren" klicke, sollte entweder "Die Passwörter stimmen" oder "Bitte geben Sie Ihr Passwort erneut ein, weil die beiden Passwörter nicht übereinstimmen" angezeigt werden, je nachdem, ob die Passwörter gleich sind oder nicht. Wenn ich jedoch zwei identische Passwörter eintippe und auf das Textfeld "Passwort verifizieren" klicke, wird die Nachricht beim ersten Mal nicht angezeigt. Ich muss noch einmal in das Feld "Passwort bestätigen" klicken und dann darauf klicken, damit die Nachricht angezeigt wird. Ich möchte, dass die Nachricht angezeigt wird, nachdem ich aus dem Textfeld "Passwort bestätigen" geklickt habe und nicht erneut ein- und wieder klicken muss. Was mache ich hier falsch?Die Nachrichten werden nicht richtig auf meiner Webseite in Javascript angezeigt. Die Nachricht wird nur angezeigt, nachdem Sie zweimal in das Textfeld geklickt haben.

Ich verwende eine password.js Datei und eine setpassword.html Datei für diese Webseite.

Meine password.js Datei ist:

var verifypasswordclick = document.getElementById("txtPWVerified"); 

function verifypassword1() { 
    var password1 = document.getElementById("txtPassword").value; 
    var verifypassword = document.getElementById("txtPWVerified").value; 
    if(password1 == '' || verifypassword == '') { 
     return null; 
    } 
    if(password1 == verifypassword) { 
     alert('The passwords match'); 
    } 
    else if(password1 !== verifypassword || password1 == "" || verifypasword == "") { 
     alert("Please enter your password again because the two passwords don't match"); 
    } 
} 

verifypasswordclick.onblur = function() { 
verifypasswordclick.addEventListener("blur",verifypassword1); 
}; 

Meine setpassword.html Datei ist:

<!DOCTYPE html> 
<!-- H5FormValidation.html --> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Register Here</title> 
</head> 

<body> 
    <h2>Register Here</h2> 

    <form id="formTest" method="get" action="processData"> 
    <table> 

    <tr> 
     <td><label for="txtEmail">Email<span class="required">*</span></label></td> 
     <td><input type="email" id="txtEmail" name="email" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPassword">Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPassword" name="password" required></td> 
    </tr> 
    <tr> 
     <td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td> 
     <td><input type="password" id="txtPWVerified" name="pwVerified" required></td> 
    </tr> 

    <tr> 
     <td>&nbsp;</td> 
     <td> 
      <input type="reset" value="CLEAR" id="btnReset"></td> 
    </tr> 
    </table> 
    </form> 
<script src = "password.js"></script> 
</body> 
</html> 

Antwort

0

Das Passwort zweites Mal überprüft wird, weil die eventListener das Element hinzugefügt wird erst nach der erste onblur Ereignis. Um das erste Mal zu arbeiten, fügen Sie den eventListener nicht in der onBlur-Funktion hinzu. Siehe den untenstehenden js-Code.

var verifypasswordclick = document.getElementById("txtPWVerified"); 

function verifypassword1() { 
    var password1 = document.getElementById("txtPassword").value; 
    var verifypassword = document.getElementById("txtPWVerified").value; 

    if (password1 == verifypassword) { 
     alert('The passwords match'); 
    } 
    else if (password1 !== verifypassword || password1 == "" || verifypasword == "") { 
     alert("Please enter your password again because the two passwords don't match"); 
    } 
} 

verifypasswordclick.addEventListener("blur", verifypassword1); 
+0

Sollte ich nur diese Phrase löschen: verifypasswordclick.onblur = function() {, dann? –

+0

Ja, wenn es nur verwendet wird, um anzuzeigen, dass das Passwort übereinstimmt oder nicht. –