Password Matching Validation #2

Using the constraint validation API to enforce two password fields be the same on a form before allowing it to be submitted.

by Larry Adams

HTML

<form id="passwordForm" novalidate>
    <fieldset>
        <legend>Change Your Password</legend>
        <ul>
            <li>
                <label for="password1">Password 1:</label>
                <input type="password" required id="password1" />
            </li>
            <li>     
                <label for="password2">Password 2:</label>
                <input type="password" required id="password2" />
            </li>
        </ul>
        <input type="submit" />
    </fieldset>
</form>

CSS

form { padding: 20px; width: 300px; overflow: hidden; }
fieldset { padding: 10px; border: 1px solid black; margin-bottom: 5px; }
li { padding: 10px; }
input[type=submit] { float: right; margin-top: 10px; }

JavaScript

(function() {
    var password1 = document.getElementById('password1');
    var password2 = document.getElementById('password2');
    
    var checkPasswordValidity = function() {
        if (password1.value != password2.value) {
            password1.setCustomValidity('Passwords must match.');
        } else {
            password1.setCustomValidity('');
        }        
    };
    
    password1.addEventListener('change', checkPasswordValidity, false);
    password2.addEventListener('change', checkPasswordValidity, false);
    
    var form = document.getElementById('passwordForm');
    form.addEventListener('submit', function(event) {
        checkPasswordValidity();
        if (!this.checkValidity()) {
            event.preventDefault();
            //Implement you own means of displaying error messages to the user here.
            password1.focus();
        }
    }, false);
}());