h5validate - HTML5 Validation on All Browsers

h5validate is a jQuery plugin that adds form validation support to non-HTML5 or HTML5 browsers. What I like about the plugin is that it allows me to standardise the form markup and ensure that client-side validation works across browsers.

It's pretty simple to use, I'll go through a simple way to activate the plugin :)

The form markup:

<style>
    .hidden      { display: none; }
    .error       { color: red; }
    .input-error { border: solid 1px red; }
</style>

<form class="validatable" action="/post-target" method="post">
    <input type="text" id="username" data-h5-errorid="invalid-username" pattern="*{8,20}" required />
    <div id="invalid-username" class="error hidden">Error</div>
</form>

Step 1: Include the script at the bottom of the page

<script type="text/javascript" src="/path/to/jquery.h5validate.js"></script>

Step 2: Initialize

$(function() {
    $(".validatable").h5validate({
        errorClass: "input-error"
    });
});

That's all it takes!

A few pointers:
1. If you need to display an error message, it should be hidden beforehand. Also, the input should have a data-h5-errorid referencing the hidden message.
2. If you want to use a custom error for inputs that has error, declare it using errorClass when initializing (default is ui-state-error).