The messages are not properly being displayed on my webpage in javascript. The message only displays after clicking in and out of the textbox twice.
Question
I wrote several functions to check if the two passwords are equal. I first type two passwords. When I click out of the "verify password" box, it should either display "The passwords match" or "Please enter your password again because the two passwords don't match" depending on whether or not the passwords are equal to each other. However, when I type in two identical passwords and I click out of the "verify password" text box, the message does not display the first time. I have to click inside the "verify password" box one more time, and then click out of it for the message to display. I want the message to display right after I click out of the "verify password" textbox, not having to click in and out again. What am I doing wrong here?
I am using a password.js file and a setpassword.html file for this webpage.
My password.js file is:
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);
};
My setpassword.html file is:
<!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> </td>
<td>
<input type="reset" value="CLEAR" id="btnReset"></td>
</tr>
</table>
</form>
<script src = "password.js"></script>
</body>
</html>
1 answers
solution1
0 2016-07-29 05:38:56
The password is verified second time because, the eventListener is added to the element only after the first onblur event. To work in first time don't add the eventListener with in the onBlur function. Refer the below 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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.