The H5F script will detect if the browser has support for the HTML5 Forms Chapter and either hook into the native methods, attributes and events or emulate the new features in non-supporting browsers.

H5F offers support for most, but not all, of the HTML5 Forms Chapter:

• Input types: email and url
• Input attributes: pattern, placeholder, min, max, step, required
• Textarea attributes: placeholder and required
• Select attributes: required

Also supported is the constraint validation API:

• Field validity object
• checkValidity() method on form or indivdual field

<form id="signup">
    <label>Email</label>
    <input type="email" placeholder="e.g. [email protected]" required />

    <label>Phone</label> 
    <input type="tel" id="tel" name="tel" pattern="\d{10}" />

    <label>Post code *</label>
    <input type="number" min="1001" max="8000" required />

    <input type="submit" />
</form>

On page load you run the H5F setup method:

H5F.setup(document.getElementById("signup"));

For a working demo download the demo files.

You can pass a HTMLFormElement, HTMLCollection of HTMLFormElements, or Array of HTMLFormElements.

H5F.setup([document.getElementById("form1"),document.getElementById("form2"),document.getElementById("form3")]);

The H5F.setup method also accepts a second optional argument so you can specify the fields validation class names:

H5F.setup(document.getElementById("signup"), {
    validClass: "valid",
    invalidClass: "invalid",
    requiredClass: "required"
});

http://thecssninja.com/javascript/H5F

Dual-licensed under the BSD and MIT licenses.