Password confirmation using JavaScript doesn't get updated

Question

I have a registration form. It successfully checks the value of password input and confirm_password input. (X changes to ✔️ if both passwords match) The thing is, after check mark appears, it looks like it gets stuck there! when I change the password, the check mark should change to X but it doesn't! It's stuck on ✔️!

<div    id="confirm_pass2">
  <span id="password_confirmation"  class="unconfirmed_pass"></span>
</div>

  <script>
        var confirmation = document.getElementById("confirm_password");
                confirmation.onfocus = function (){
                document.getElementById("confirm_pass2").style.display = "block";
            }
            confirmation.onblur = function (){
                document.getElementById("confirm_pass2").style.display = "none";
            }
            confirmation.onkeyup = function () {
        if (document.getElementById("confirm_password").value.match(document.getElementById("password").value)){
            document.getElementById("password_confirmation").classList.remove("unconfirmed_pass");
            document.getElementById("password_confirmation").classList.add("confirmed_pass");
        }   }
        </script>



<style>
 #confirm_pass2 {
    position: absolute;
    display: none;
}
.confirmed_pass:before {
    position: absolute;
    font-size: 25px;
    right: 642px;
    bottom: 197px;
    font-weight: bold;
    color: green;
    content: "✔";
}
.unconfirmed_pass:before {
    font-family: calibri;
    position: absolute;
    right: 647px;
    bottom: 205px;
    font-size: 22px;
    font-weight: bold;
    color: red;
    content: "X";
}
</style>

UPDATE I changed "match" to == and everything seems to be working fine.

if (document.getElementById("confirm_password").value == document.getElementById("password_new").value){...

I have another checker which validates the password to meet the requirements. I've done it exactly like this and it has no problem! I don't know what's wrong with this one.. — Ata
– Ata, Commented Apr 17, 2020 at 22:49
P.S: Just found out another problem! If my password is fx and my confirm_password is asdsadasfx, they're considered a match! — Ata
– Ata, Commented Apr 17, 2020 at 23:09

Karim A. Wazzan · Accepted Answer · 2020-04-17 22:38:33Z

0

How about you try adding an else condition there something like

confirmation.onkeyup = function () { 
if (document.getElementById("confirm_password").value.match(document.getElementById("password_new").value)){ 
document.getElementById("password_confirmation").classList.remove("unconfirmed_pass"); document.getElementById("password_confirmation").classList.add("confirmed_pass"); 
} else {
document.getElementById("password_confirmation").classList.remove("confirmed_pass"); document.getElementById("password_confirmation").classList.add("unconfirmed_pass");
}
 }

answered Apr 17, 2020 at 22:38

Karim A. Wazzan

2291 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ata Over a year ago

Good idea. I tried it just now. Now it changes back to X if I delete what's typed in confirm_password. But it's still not LIVE. You know what I mean? It doesn't change instantly.

Karim A. Wazzan Over a year ago

Try changing onkeyup to oninput it might be faster

Collectives™ on Stack Overflow

Password confirmation using JavaScript doesn't get updated

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related