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

• First of all, you have to download the polyfill
• Then you shall upload the JavaScript file, jquery.h5validate.js, to your webserver
• Then you have to copy and paste the following code into the end of the body on any page that uses HTML5 forms (and make sure the path for the jquery.h5validate.js is correct - you might have uploaded the file to a specific folder and then you would have to change the path)

<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:

• Form validation using the required and pattern attributes
• The autofocus attribute
• The placeholder attribute
• The range input type and output tag
• The datetime, datetime-local, date, week and week input types
• The color input type