3B Project Final

by Larry Adams

HTML

<form>
    <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

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);