Why are my messages not being displayed when I click out of the textbox on my webpage?
Question
I wrote several functions to check if the two passwords are equal. 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 or two different passwords and I click out of the "verify password" text box, the message is not displayed at all. What am I doing wrong here?
This is what the assignment is asking: The webpage should have two input boxes of type="password". The user will need to enter a new password in the first input box, then type the password again in the second input box.
When focus leaves the second box, your script checks to make sure the values of both boxes are the same and not empty (5 points). Note: A lot of examples on the Internet use the html input onchange property in the html file to call the event handler. Do not use any html property of of any type to handle events. Instead, define an event listener in your .js file (5 points).
If they're not the same, display a message saying that a second try is needed and reset the focus in the first password box. If they are the same, replace any previous error messages with a message saying the passwords match.
I am using a password.js file and a setpassword.html file for this webpage.
My password.js file is:
var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
var verifypasswordclick = document.getElementById("txtPWVerified");
function verifypassword1() {
if(password1 == verifypassword && password1 != "" && verifypasword != "") {
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() {
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>
2 answers
solution1
0 2016-07-29 02:32:50
You're not calling the verifypassword1 function correctly. You need parentheses. But instead of calling the function from within an anonymous function, you can try this line instead.
verifypasswordclick.addEventListener("blur",verifypassword1);
Also, you're comparing the initial values every time. You need to get the new values from the input elements each time you check the passwords. In your verifypassword1 function, you need to get the new value from those input elements like so.
function verifypassword1() {
password1 = document.getElementById("txtPassword").value;
verifypassword = document.getElementById("txtPWVerified").value;
// rest of code
}
solution2
0 2016-07-29 02:34:41
Instead of this verifypasswordclick.onblur = function() { verifypassword1;}
Do this verifypasswordclick.onblur = 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.