Criando validação de confirmação de senha com HTML 5 e Javascript

Recentemente precisei validar a confirmação de senha em um formulário, para verificar se os dois campos de senhas eram iguais antes de o formulário ser enviado ao servidor.

Fiz uma pequena função javascript que resolve bem este problema, veja :

<form class="pure-form">
    <fieldset>
        <legend>Confirmação de Senha </legend>

        <input type="password" placeholder="Senha" id="password" required>
        <input type="password" placeholder="Confirme Senha" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirmar</button>
    </fieldset>
</form>

Agora a função JS:

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Senhas diferentes!");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

Com apenas esta validação simples você consegue inserir a validação de HTML5 para campos de senhas.

Um abraço! 😀