Checking password match returns "Passwords match" when both fields are empty
Question by Igal
I’m making a registration form and I want to check if the user has matching passwords while he’s typing and give him the appropriate message. So far everything works, except for these things:
- When the user deletes everything from Confirm Password field it still
gives him a message “Passwords do not match” while I want to give him
no message or a message saying “Please confirm password”. - When the
user deletes everything from both fields, it gives him a message
“Passwords match”, while it should give him no message at all.
Here’s my code:
$(function () {
$("#txtNewPassword").keyup(checkPasswordMatch);
$("#txtConfirmPassword").keyup(checkPasswordMatch);
});
function checkPasswordMatch() {
$("#divCheckPasswordMatch").html("");
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();
if (password == "" && confirmPassword == ""){
$("#divCheckPasswordMatch").html("");
$("#divIsPasswordExist").html("");
}
else if (password != "" && confirmPassword == "") {
$("#divCheckPasswordMatch").html("");
}
else if (password == "" && confirmPassword != "")
$("#divIsPasswordExist").html("Password cannot be empty!");
else
$("#divIsPasswordExist").html("");
if (password != confirmPassword)
{
$("#divCheckPasswordMatch").removeClass("registrationFormConfirm");
$("#divCheckPasswordMatch").addClass("registrationFormAlert");
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
else
{
$("#divCheckPasswordMatch").removeClass("registrationFormAlert");
$("#divCheckPasswordMatch").addClass("registrationFormConfirm");
$("#divCheckPasswordMatch").html("Passwords match.");
}
}
Any ideas, please?
Thank you!
Answer by Hardik Patel
......
if (password == "" && confirmPassword == ""){
$("#divCheckPasswordMatch").html("");
$("#divIsPasswordExist").html("Password and Confirm Password dosen't exists");
return;
}
else if (password != "" && confirmPassword == "") {
$("#divCheckPasswordMatch").html("Confirm Password dosent't exists");
return;
}
else if (password == "" && confirmPassword != ""){
$("#divIsPasswordExist").html("Password cannot be empty!");
return;
}
else{
$("#divIsPasswordExist").html("");
}
if (password != confirmPassword)
{
$("#divCheckPasswordMatch").removeClass("registrationFormConfirm");
$("#divCheckPasswordMatch").addClass("registrationFormAlert");
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
else
{
$("#divCheckPasswordMatch").removeClass("registrationFormAlert");
$("#divCheckPasswordMatch").addClass("registrationFormConfirm");
$("#divCheckPasswordMatch").html("Passwords match.");
}
.........
Answer by Starx
There is a more elegant way to do this. Change your conditions to this
if(password.length > 0 && confirmPassword.length >0) {
if(password == confirmPassword) {
//confirmed
} else {
// not confirm
}
} else {
//not entered
}