Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript &amp; jQuery - Chapter 6: Events - Event Listener</title>
    </head>
    <body>
        <div id="page">
            <h1>List King</h1>
            <h2>New Account</h2>
            <form method="post" action="http://mbl.is" id="formSignup">
                <label for="username">Create a username: </label>
                <input type="text" id="username" />
                <div id="usernameFeedback"></div>

                <label for="password">Create a password: </label>
                <input type="password" id="password" />
                <div id="passwordFeedback"></div>

                <label for="conf_password">Confirm password: </label>
                <input type="password" id="conf_password"/>
                <div id="conf_passwordFeedback"></div>

                <input type="checkbox" id="terms" required/>
                <label for="terms" class="checkbox"> Check to agree to terms &amp; conditions</label>
                <div id="termsHint" class="warning"></div>

                <input type="submit" value="Submit"/>

            </form>
        </div>
        <script src="event-listener.js"></script>
    </body>
</html>

var elUsername = document.getElementById('username');   // Username input
var elUserMsg      = document.getElementById('usernameFeedback');   // Error msg element

function checkUsername(minLength) {                     // Declare function
    if (elUsername.value.length < minLength) {            // If username too short
        // Set the error message
        elUserMsg.innerHTML = 'Username must be ' + minLength + ' characters or more';
    } else {                                             // Otherwise
        elUserMsg.innerHTML = '';                              // Clear msg
    }
}

elUsername.addEventListener('blur', function() {
    checkUsername(5);
}, false);

///////////////////////////
var elPassword = document.getElementById('password');
var elPassMsg      = document.getElementById('passwordFeedback');

function checkPassword(minLength) {
    if (elPassword.value.length < minLength) {
        elPassMsg.innerHTML = 'Password must be ' + minLength + ' characters or more';
    } else {
        elPassMsg.innerHTML = '';
    }
}

elPassword.addEventListener('blur', function() {
    checkPassword(8);
}, false);
//////////////////////////////////


var pass1 = document.getElementById('password');
var pass2 = document.getElementById('conf_password');
var elPassConfMsg = document.getElementById('conf_passwordFeedback');

function confirmPassword(password, conf_password) {
    if (password.value != conf_password.value) {
        elPassConfMsg.innerHTML = 'password do not match idiot'
    } else {
        elPassConfMsg.innerHTML = '';
    }
}

pass2.addEventListener('blur', function() {
    confirmPassword(pass1, pass2);
}, false);

pass1.addEventListener('blur', function() {
    confirmPassword(pass1, pass2);
}, false);

///////////////////////////////

elTerms         = document.getElementById('terms');
elTermsHint     = document.getElementById('termsHint');
elForm          = document.getElementById('formSignup');

function checkTerms(event) {
    if (!elTerms.checked) {
        elTermsHint.innerHTML = 'You must agree to the terms.';
        event.preventDefault();
    }
}
elForm.addEventListener('submit', checkTerms, false);