html5 form validation with pseudo-selectors

Example of how to validate an HTML5 form with new attributes and CSS3 pseudo-selectors.

by Mike Cunneen

HTML

<div class="container">
    <div class="jumbotron">
        <form class="form">
            <label for="taxfilenumber">Tax File Number:</label>
            <input type="text"
                name="taxfilenumber"
                id="taxfilenumber"
            pattern="^[0-9]{11}$"
            placeholder="01234567890"
            class="form-control"
            required="required"
            title="Must be 11 digits"
            />  
            <input type="submit" class="btn btn-large btn-primary">
        </form>
    </div>
</div>

CSS

#taxfilenumber:invalid {
    background-color: #ffaaaa;
    color: #ff0000;
    border-color: #ff0000;
}
#taxfilenumber:valid {
    background-color: #aaaaff;
    color: #0000ff;
    border-color: #0000ff;
}