Polyfills for form validation

As mentioned in previous chapters, not all browsers and platforms support the new exciting features of HTML5ís form validation. Therefore polyfills can come in handy as they improve your usersí experience of your website.

h5validate by Eric Leads

Eric Leads has created a very usable polyfill that increases the support of the required attribute and the pattern attribute to a degree where it is supported by the following desktop platforms: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera and the following mobile platforms: iPhone, Android, Palm WebOS

Step-by-Step Guide

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.h5validate.js"></script>

<script>
$(document).ready(function () {
    $('form').h5Validate();
});
</script>

The first script element on the first line loads a JavaScript library called jQuery and the second script element on the second line loads the h5validate polyfill. Now that you have loaded the resources into your page the last script creates a connection between the code in the polyfill and your form element.

Now, whenever you use the required attribute in your forms it is supported across all of the before mentioned platforms. Additionally, the pattern attribute is also supported across all of the before mentioned platforms. Just remember: when using the pattern attribute you have to actually define a pattern. You could e.g. use the pattern attribute to validate email addresses or to validate dates.

html5widgets by Zoltan Hawryluk

Zoltan Hawryluk have created a very comprehensive polyfill that will solve allmost any of your html5 form problems Ė it uses Modernizr to detect if there is native support for each of the HTML5 form elements and if there isnít html5widget steps in.

The html5widgets polyfill is very comprehensive and Zoltan have written a great step-by-step tutorial on how to install and use his polyfill and therefore all you will get here is a list of all the things html5widgets can do: