CSS3 Form Input Selectors

HTML

<link rel="stylesheet" href="http://dryan.com/css3/css/html5-reset.css">
<form action="." method="POST" accept-charset="UTF-8">
    <fieldset>
        <legend>Personal Info</legend>
        <ol>
            <li>
                <label for="id_first_name" data-required="true">First Name</label>
                <input type="text" required name="first_name" id="id_first_name" autofocus tabindex="1">
            </li>
            <li>
                <label for="id_last_name" data-required="true">Last Name</label>
                <input type="text" required name="last_name" id="id_last_name" tabindex="2">
            </li>
            <li>
                <label for="id_age">Age</label>
                <input type="number" name="age" min="13" max="100" tabindex="3">
            </li>
            <li>
                <label for="id_phone">Telephone</label>
                <input type="tel" name="phone" required tabindex="4">
            </li>
            <li>
                <label for="id_phone">Email</label>
                <input type="email" name="email" required tabindex="5">
            </li>
            <li>
                <label for="id_password">Password</label>
                <input type="password" disabled name="password" tabindex="6">
            </li>
        </ol>
    </fieldset>
    <p class="buttons"><button type="submit">Submit</button></p>
</form>
<br>
<small>* denotes required field</small>
<br>
<br>
<p style="text-align: center">For more info see <a href="http://www.alistapart.com/articles/forward-thinking-form-validation/" title="Forward Thinking Form Validation" target="_blank">Forward Thinking Form Validation</a></p>

CSS

@charset "UTF-8";

body {
    padding: 1em;
}

form ol {
    margin: 1em auto;
}

form ol > li {
    list-style: none;
    margin: 0 auto 1em;
}

form label {
    display: block;
    margin: 0 auto 0.25em;
}

form label[data-required]:after {
    content: " *";
}

fieldset legend {
    font-weight: bold;
    padding-bottom: 1em;
}

input,
textarea {
    -webkit-box-shadow: none !important;
    outline: 2px outset transparent;
    border: 2px solid silver;
    background: white;
    padding: 3px;
    outline: none !important;
}

input:focus,
textarea:focus {
    border-color: yellow;
}

input:required:valid,
textarea:required:valid,
input.was-focussed:valid,
textarea.was-focussed:valid,
input[class*="focussed"]:valid:not(.empty) {
    border-color: green;
}

input:invalid:not(:focus).was-focussed,
textarea:invalid:not(:focus).was-focussed,
input[type=number]:invalid:focus {
    border-color: red;
}

input[disabled],
textarea[disabled] {
    background: #eee;
}

form button {
    background: grey;
    color: #fff;
    font-weight: bold;
}

form button:not([disabled]) {
    background: green;
}

JavaScript

(function($) {
    var isValid = true,
        form = $('form'),
        submit = form.find('[type=submit]');
    $(':input:not(:disabled):not([readonly])').each(function() {
        if(!$(this).is(':valid')) {
            isValid = false;
        }
    });
    if(!isValid) {
        submit.attr({'disabled': true});
    }
    $(':input').each(function() {
        if(!$(this).val()) {
            $(this).addClass('empty');
        }
    }).focus(function() {
        $(this).addClass('focussed');
    }).blur(function() {
        $(this).removeClass('focussed').addClass('was-focussed');
        isValid = true; // reset with optimism
    $(':input:not(:disabled):not([readonly])').each(function() {
        if(!$(this).is(':valid')) {
            isValid = false;
        }
    }).keyup(function() {
        if($(this).val()) {
            $(this).removeClass('empty');
        } else {
            $(this).addClass('empty');
        }
    });
        if(isValid) {
            form.addClass('valid');
            submit.removeAttr('disabled');
        } else {
            form.removeClass('valid');
            submit.attr({'disabled': true});
        }
    });
})(jQuery);