密码为空时如何禁用消息

Question

I was doing password matching concept and it was working fine when i entered the passwords in it and it shows "Passwords match" or "Passwords didn't match". But here is the problem or can say bug kind of thing. When your passwords match and then suddenly you remove both the passwords in the boxes it still shows "passwords match" or "passwords didn't match". I am posting an image of for better understanding.

So how to hide or remove that "passwords didn't match or passwords match" comment when both the passwords are empty in the boxes. I am posting the code below on what i did

HTML

<p>
    <input type="password" name="NPassword" placeholder="New Password" id="txtNewPassword" />
</p>
<input type="password" name="RNPassword" placeholder="Retype New Password" id="txtConfirmPassword" onChange="isPasswordMatch();" />
<div id="divCheckPassword"></div>

JavaScript

function isPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!");
    else $("#divCheckPassword").html("Passwords match.");


}

$(document).ready(function () {
    $("#txtConfirmPassword").keyup(isPasswordMatch);
});

Answer 1

Add a check for checking if the passwords text box are empty or filled. If text boxes are empty clear divCheckPassword

Answer 2

You should add a test to check if the passwords fields are empty.

function isPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!");
    else if ((password ==  "") || (confirmPassword == "")) $("#divCheckPassword").html("Please fill both password fields"); 
    else $("#divCheckPassword").html("Passwords match.");


}

$(document).ready(function () {
    $("#txtConfirmPassword").keyup(isPasswordMatch);
});

Or use $("#divCheckPassword").html(""); instead of $("#divCheckPassword").html("Please fill both password fields"); to clear the message.

Answer 3

simply first check if the input is empty or not.

 function isPasswordMatch() { var password = $("#txtNewPassword").val(); var confirmPassword = $("#txtConfirmPassword").val(); if(password =='' || confirmPassword=='') $("#divCheckPassword").html(''); else if(password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!"); else $("#divCheckPassword").html("Passwords match."); } $(document).ready(function () { $("#txtConfirmPassword").keyup(isPasswordMatch); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input type="password" name="NPassword" placeholder="New Password" id="txtNewPassword" /> </p> <input type="password" name="RNPassword" placeholder="Retype New Password" id="txtConfirmPassword" onChange="isPasswordMatch();" /> <div id="divCheckPassword"></div> 

Answer 4

This code is for hiding the message when you remove password first and confirm password next or vice-versa.

 function isPasswordMatch() { var password = $("#txtNewPassword").val(); var confirmPassword = $("#txtConfirmPassword").val(); if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!"); else $("#divCheckPassword").html("Passwords match."); if ((password == "") && (confirmPassword == "")) $("#divCheckPassword").hide(); if ((confirmPassword == "") && (password == "")) $("#divCheckPassword").hide(); } $(document).ready(function () { $("#txtNewPassword").keyup(isPasswordMatch); $("#txtConfirmPassword").keyup(isPasswordMatch); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input type="password" name="NPassword" placeholder="New Password" id="txtNewPassword" /> </p> <input type="password" name="RNPassword" placeholder="Retype New Password" id="txtConfirmPassword" onChange="isPasswordMatch();" /> <div id="divCheckPassword"></div>