0

I'm working on a login screen where I need to display the password requirements and matching status. Currently, the password requirements are working as needed, but the problem I am having is with the matching password field addon that needs to go from a gray (null and default) to a red "X" (missing or mismatching password) or green "✔" (matching passwords), just as it happens with the password requirements status.

Here's the working DEMO

Such status must be displayed using the following tag as it is part of Bootstrap's input-group:

<span id="matchpswstatus" class="input-group-addon"><i class="fa fa-times"></i></span>

This is part of the bootstrap group, like so:

<div class="input-group">
    <input type="password" id="matchpsw" name="matchpsw" class="form-control reenterpassword" placeholder="Re-enter Password" required />
    <span id="matchpswstatus" class="input-group-addon"><i class="fa fa-times"></i></span>
</div>

I would appreciate any help in getting the gray "✖" to turn red in case a User re-enters a mismatching password OR to turn into a green "✔" in case both passwords are a match.

Thank you in advance!

Marcelo Martins
  • 150
  • 15
  • Well, to get it to change from an X to a check you just have to swap out the `fa-times` for `fa-check`. Then as far as the color goes that can be done with css. Which part of that has you confused? – Taplar Aug 22 '18 at 22:44
  • 1
    couldn't you disable the submit button if the passwords didn't match? (alternately perhaps?) – Rachel Gallen Aug 22 '18 at 23:12
  • I like your suggestion Rachel. I've made some minor modification to the code below: http://jsfiddle.net/UXEngineer/6av5h2dr/14/ How could we disable the submit button until there are passwords match using the jsfiddle above? Thanks. – Marcelo Martins Aug 23 '18 at 00:11
  • @MarceloMartins I only saw your reply to comment now (just because I was browsing past questions).. please use the '@' sign to tag a user in future, that way the message will go into inbox notifications. Btw, I know you resolved the css, but you could still disable the button using the disabled property. Have a look at the answers to this question (they cover this issue with both vanilla js and jquery) : https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button – Rachel Gallen Aug 27 '18 at 20:47

1 Answers1

1

Using the same approach as with the password requirements, you could do something like this:

var matchpswstatus = document.getElementById("matchpswstatus");
var divCheckPasswordMatch = document.getElementById("divCheckPasswordMatch");

$(function() {
  $("#matchpsw").keyup(function() {
    if ($("#psw").val() === $(this).val()) {
        divCheckPasswordMatch.textContent = "Passwords match.";
      matchpswstatus.classList.add("match");
      matchpswstatus.classList.remove("nomatch");
      matchpswstatus.textContent = "✔";
    } else {
        divCheckPasswordMatch.textContent = "Passwords do not match!";
      matchpswstatus.classList.add("nomatch");
      matchpswstatus.classList.remove("match");
      matchpswstatus.textContent = "✖";
    }
  });
});

with added css:

.match {
  color: green;
}
.nomatch {
  color: red;
}

But you also might want to update when the first password input is changed.

caedmon
  • 106
  • 7