HTML5 Form Shim

That is a jQuery plugin, which brings HTML5 Form support on legacy browsers and allow to extend HTML5 Form on new ones. Different browsers provide different look&feel for the form elements. However you would hardly able to re-style bubble validation messages , date-picker, color-picker and others. With this plugin you may intercept browser native HTML5 Form API control and, therefore, have all the attached UI components always in the same style. Besides, you can have own validation messaging (e.g. showing messages next to the field instead using tooltips).

To enable the shim you simply mark forms with data-enable-shim="true" while running jQuery and this plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./js/build/jquery.html5form.min.js" type="text/javascript"></script>


<form data-enable-shim="true">
...
</form>

See details on how top use HTML5 form at html5rocks.com

Styling

Take in the account that legacy browsers ignore CSS pseudo-classes :focus, :invalid, :valid, so use instead classes focus, invalid, valid.

NOTE: The examples below use CSS3 styles. If you want your forms not only behave, but look the same in all browsers, use simple styles

Features

The constraint validation API exposed on HTMLElement for legacy browser and on h5FormShim input wrappers (e.g. input.checkValidity(), input.validationMessage, input.validity.typeMismatch where var input = hfFormShim.getInput("#email")).
Can show validation messages on custom elements
Easy attach of 3rd-party-made widgets (datepicker, colorpicker, slider as so on)
Allows custom on-submit tooltips
Allows custom input type validators
Allows custom on-input callbacks
Shim formaction, formenctype, formmethod, and formtarget attributes
Covered with tests
Implemented as UMD (can be used as AMD or CommonJS module)

Example 1: Custom form submission validation

To make the form showing your custom tooltip on submission validation, define data-custom-validation property on the form element.

The plugin will use $.setCustomValidityCallback to display validation messages. You can override this callback with your own function:

$.setCustomValidityCallback = function(error) {
    var pos = this.position(),
    tooltip = $('<span class="custom-validity-tooltip">' + error
                + '<div><div><!-- --></div></div></span>').appendTo('body');
    tooltip.css('top', pos.top - tooltip.height() - 22);
    tooltip.css('left', pos.left - 10);
    window.setTimeout(function(){
        tooltip.remove();
    }, 2500);
}

Example 2: Showing validation messages on custom elements

This form forced to custom validation by attribute data-custom-validation. So whatever browser you use it displays validation messages on the elements marked as data-validation-message-for="<input-id>"

<input id="email" type="email" name="email" />
<div>
    <div data-validation-message-for="email"></div>
</div>

Example 3: Custom input type validation

You can easily define your own input type validator by using $.setCustomInputTypeValidator. It receives following arguments:

(string) Input type (here Zip for <input type="zip">). It takes data-type attribute value if specified (<input data-type="zip">)
(string) Input value validation message
(function) Validation callback (returns boolean)

$.setCustomInputTypeValidator( "Zip", "Please enter a valid zip code", function() {
    var pattern = /^[0-9]{6,8}$/;
    return pattern.test( $( this ).val() );
});

Mark that the input element is available within the callback as the context (this).

Example 4: Attaching 3rd-party widgets to form elements

You can attach to any input element a custom handler. Thus you can enrich inputs of such types as color, date, datetime, week, moth, time, range with corresponding widgets (e.g. how it's implemented in latest Chrome/Opera releases).

In the example below you can find color input using colorPicker jQuery-plugin and date input using jQueryUI datePicker

/**
 *  Custom date picker for color[type="color"]
 *
 *  @param string Input type (here Color for <input type="color">)
 *  @param string Input value validation message
 *  @param function Validation callback (returns boolean)
 *  @param function Initialization callback
 */
$.setCustomInputTypeValidator( "Color", "Please enter a valid hex color", function() {
    var pattern = /^#(?:[0-9a-f]{3}){1,2}$/i;
    return pattern.test( $( this ).val() );
}, function( control ) {
    control.isShimRequired() &&
    control.degrade().boundingBox.ColorPicker({
        onChange: function( hsb, hex, rgb ) {
            control.boundingBox.val( "#" + hex );
        },
        onBeforeShow: function () {
            $( this ).ColorPickerSetColor( this.value );
        }
    });
});

/**
 *  Custom date picker for input[type="date"]
 *
 *  @param string Input type (here Date for <input type="date">)
 *  @param string Input value validation message
 *  @param function Validation callback (returns boolean)
 *  @param function Initialization callback
 */
$.setCustomInputTypeValidator( "Date", "Please enter a valid date", function() {
    var pattern = /^\d{2,4}(-|\/)\d{2,4}(-|\/)\d{2,4}$/i;
    return !$( this ).val() || pattern.test( $( this ).val() );
}, function( control ) {
    control.isShimRequired() &&
    control.degrade().boundingBox.datepicker();
});

As you see here last argument of $.setCustomInputTypeValidator is initialization callback. It injects dependency to input control handler (control). From which you can access the element control.boundingBox(the same as $(this) ) and methods such as control.isShimRequired() (indicates if if the input type supported) and control.degrade() (switch the type to text, which prevents collision with browser-specific element treatment)

Example 5: Custom oninput callback

HTML5 introduces a new event oninput, which can be handled to perform additional validation tests on a field. For example, making registration form you can define a handler which checks by XMLHttpRequest if the given email already exists in DB. Here an example for a cross-browser oninput handler:

$('form.example3 input[name=confirm]').on("oninput", function () {
    var input = $(this);
    if (input.val() != $('form.example3 input[name=password]').val()) {
    input.setCustomValidity('The two passwords must match.');
    } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
    }
});

Download the latest version from GitHub