Validate password confirmation

Question

I have two inputs within my form: Password and Confirm Password

Before the user submit the form, I would like to compare the value of the two inputs. If they are equal, send the form normally. If there is divergence between them, it would display a "textile" just below the input of Confirm Password.

I tried to do here, but the form is always sent, even if the passwords are different. Below is what I have done:

function validarSenha() {
  senha = document.getElementsByName('senha').value;
  senhaC = document.getElementsByName('senhaC').value;

  if (senha != senhaC) {
    senhaC.setCustomValidity("Senhas diferentes!");
    return false;
  } else {
    return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input required="" type="password" name="senha" id="senha" placeholder="Senha">
  <input required="" type="password" name="senhaC" id="senhaC" placeholder="Confirmar Senha">
  <br><br>
  <button type="submit" onclick="return validarSenha()">Enviar</button>
</form>

Answer 1

getElementsByName returns a list (more precisely a NodeList) which may have several elements. So it does not work to catch the value from this list directly.

How its elements possess a id, and Ids must be unique on a page, just use getElementById to obtain the elements.

Another detail is that setCustomValidity should be called in the element input and not in your value (the way you did, he would be called value and it wouldn’t work). So one way to solve it is to:

let senha = document.getElementById('senha');
let senhaC = document.getElementById('senhaC');

function validarSenha() {
  if (senha.value != senhaC.value) {
    senhaC.setCustomValidity("Senhas diferentes!");
    senhaC.reportValidity();
    return false;
  } else {
    senhaC.setCustomValidity("");
    return true;
  }
}

// verificar também quando o campo for modificado, para que a mensagem suma quando as senhas forem iguais
senhaC.addEventListener('input', validarSenha);

<form>
  <input required type="password" name="senha" id="senha" placeholder="Senha">
  <input required type="password" name="senhaC" id="senhaC" placeholder="Confirmar Senha">
  <br><br>
  <button type="submit" onclick="return validarSenha()">Enviar</button>
</form>

Another detail is that we have to call too reportValidity, for setCustomValidity does not display the message when it is executed in the Submit.

I also removed the jQuery that was not being used. Finally, the attribute required does not need to have a value, so instead of required="", let alone required.

Answer 2

Dude what you can do is check if the two passwords match when the user finishes typing the password confirmation and click off the input.

Remembering that you should do this back-end check as well.

let inputPass = document.querySelector('#password');
let inputConfirmPass = document.querySelector('#confirmPass');

inputConfirmPass.addEventListener('focusout', () => {
   if( inputPass.value !== inputConfirmPass.value){
      alert('As senhas não coincidem');
   }
})