improving HTML5 form-validation using :user-error selector

by Akram kamal

HTML

<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<form class="example">
    <div>
        <label for="your-name">Name: *</label>
        <input type="text" required="required" id="your-name" name="yourName" />
        <span class="error-box">
            <span>Please enter your Name.</span>
        </span>
    </div>
    <div>
        <label for="email">email: *</label>
        <input type="email" required="required" id="email" name="email" />
        <span class="error-box">
            <span>Please enter your e-mail address.</span>
        </span>
    </div>
    
    
    <div>
        <input type="submit" />
    </div>
</form>

<p><a href="http://afarkas.github.com/webshim/demos/index.html" target="_blank">uses webhsims lib</a>

CSS

body {
    font: 100% arial,helvetica,sans-serif;
}

.example {
    margin: 10px;
    padding: 1px 8px;
    background: #fff6c6;
    border-radius: 10px;
    width: 420px;
}
.example > div:after {
    content: " ";
    display: block;
    clear: both;
}
/* animate all */
.error-box span,
.example input[type=text],
.example input[type=email] {
    transition: all 1s;
}
.error-box {
    overflow: hidden;
    display: inline-block;
    max-width: 175px;
    vertical-align: middle;
    margin: 0 0 0 5px;
}
.error-box span {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translate(-100%, 0);
    color: #e11;    
    font-size: 80%;
}
.example > div {
    margin: 15px 10px;
    padding: 5px 10px;
    border-radius: 10px;
    background: #ffe268;
    box-shadow: 3px 3px 3px #e0c75b;
}
.example input {
    box-shadow: none;
}
.example input[type=text],
.example input[type=email] {
    display: inline-bock;
    padding: 0.3em;
    height: 1.1em;
    width: 180px;
    border: 1px solid #d8bf58;
    border-radius: 4px;
    box-shadow: inset 1px 1px 1px #e0c75b;
    background: #fff;
}

.example label {
    margin: 0.1em 0;
    cursor: pointer;
    display: block;
}
.example input[type=submit] {
    width: 190px;
    text-align: center;
}


/* the magic :user-error selector | sadly for x-browser-polyfill we need to repeat the css */

.example input[type=text]:user-error,
.example input[type=email]:user-error {
    border-color: #e11;
}
.example input[type=text]:-moz-ui-invalid,
.example input[type=email]:-moz-ui-invalid {
    border-color: #e11;
}
.example input[type=text].user-error,
.example input[type=email].user-error {
    border-color: #e11;
}
:user-error + .error-box span {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}
:-moz-ui-invalid + .error-box span {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}
.user-error + .error-box span {
    visibility: visible;
    opacity: 1;
   ...

JavaScript

(function() {
    $.webshims.polyfill('forms');
})();