Pure CSS3 form validation

by Fahd Murtaza

HTML

<h1>CSS3 form validation</h1>

<form>
     <h2>Sign Up</h2>

    <label for="name">Name:</label>
    <input type="text" id="name" required/>
    <label for="email">Email:</label>
    <input type="email" id="email" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" />
    <label for="url">Website:</label>
    <input type="text" id="url" required pattern="^(https?://)?(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})(/[\w\d:#@%/;$()~_?\+-=\\\.&]*)?$" />
    <input type="submit" value="Let's Get Started!" />
</form>

CSS

input:valid:not([type=submit]) {
    border-color: #080;
    background: #e6ffe6 url(http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/images/valid.png) no-repeat 97% center;
}
input:focus:invalid:not([type=submit]) {
    border-color: #800;
    background: #ffe6e6 url(http://webdesigntutsplus.s3.amazonaws.com/tuts/214_html5_form_validation/demo/images/invalid.png) no-repeat 97% center;
}