Validation of inputs does not update

Question

I did the following function:

function verifica(){
    var csenha = document.getElementById("csenha").value;
    var csenha2 = document.getElementById("csenha2").value;
    if(csenha != csenha2){
        document.getElementById("csenha2").setCustomValidity("As senhas são diferentes.");
        csenha2.setCustomValidity('');
        return false;
    }
}

It is to confirm the password, and it works, if they are different it returns false to the form and prevents Ubmit, but even when I change them to be equal, keeps entering the condition of if and warning that they are different. I want to know how to make it stop happening. HTML is like this:

  <label for="senha"><b>Senha</b></label>
  <input type="password" placeholder="Insira sua senha." id="csenha" required>

  <label for="senha-repeat"><b>Repita a senha</b></label>
  <input type="password" placeholder="Insira sua senha novamente." id="csenha2" required>

Function call:

<button type="submit" onclick="return verifica()" class="btn btn-success btn-lg btn-block" id="signin">Cadastrar</button>

Answer 1

There’s an error in the line below:

csenha2.setCustomValidity('');

The value of the variable csenha2 is the value of the second field, not the field itself.

Even then your validation will still be incorrect.

It takes yet another event that erases the setCustomValidity when the second field is changed, otherwise it will continue showing the message even if password are equal.

And also remove the return of onclick and just put return function when passwords are different. No need to return false because this click does not need to wait for a boolean return because the setCustomValidity will not be empty and the form will not be sent. Just a simple return out of office.

Your code will look like this:

function verifica(){
   var csenha = document.getElementById("csenha").value;
   var csenha2 = document.getElementById("csenha2").value;
   if(csenha != csenha2){
      document.getElementById("csenha2").setCustomValidity("As senhas são diferentes.");
      return;
   }

   document.getElementById("csenha2").setCustomValidity('');
}

document.getElementById("csenha2").oninput = function(){
   document.getElementById("csenha2").setCustomValidity('');
}

<form action="./">
   <label for="senha"><b>Senha</b></label>
   <input type="password" placeholder="Insira sua senha." id="csenha" required>
   
   <label for="senha-repeat"><b>Repita a senha</b></label>
   <input type="password" placeholder="Insira sua senha novamente." id="csenha2" required>
   <br>
   <button type="submit" onclick="verifica()" class="btn btn-success btn-lg btn-block" id="signin">Cadastrar</button>
</form>