setCustomValidity password example

setCustomValidity password example

by Artur Soul

HTML

<form id="sign_up" method="post" action="/auth/identity/register">
    <h1>Password check</h1>
    <div class="field">
        <input id="name" class="username" type="text" placeholder="Full name" name="name" required>
    </div>
    <div class="field">
        <input id="email" class="username" type="email" placeholder="Email address" name="email" required>
    </div>
    <div class="field">
        <input id="password" class="username" type="password" placeholder="Password" name="password" required>
    </div>
    <div class="field">
        <input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required>
    </div>
    <div class="field">
        <input class="btn btn-primary" type="submit" value="Sign up" name="commit">
    </div>
</form>

JavaScript

function validatePassword() {
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("password_confirmation").value;
pass1 != pass2 ? document.getElementById("password_confirmation").setCustomValidity("Passwords don't Match") : document.getElementById("password_confirmation").setCustomValidity('');
}

document.getElementsByName("commit")[0].onclick = validatePassword;