CODEWITHSUNDEEP
javascriptjqueryhtml
FIFA oneterahertz
FIFA oneterahertz

Reputation: 720

How to disable a message when the password value is empty

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.

enter image description here

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);
});

Upvotes: 0

Views: 646

Answers (4)

FIFA oneterahertz
FIFA oneterahertz

Reputation: 720

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>

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

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>

Upvotes: 1

workoverflow
workoverflow

Reputation: 586

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.

Upvotes: 1

visorvice1
visorvice1

Reputation: 64

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

Upvotes: 1

Related Questions