html5 forms with polyfills – is it worth it?

by

First of all I’m the creator of webshims lib (one of those polyfills, which isn’t maintained anymore). To answer your question:

Is it worth creating a forms polyfill for a project?

No, it is really hard to do this just for one project. Well, I have done it, simply because I want to use modern technologies.

Is it worth using a forms polyfill like webshims lib for a project?

Yes absolutely! And here is why:

1. Nice standardized declarative Markup API

After including webshims and scripting the following:

//polyfill forms (constraint validation) and forms-ext (date, range etc.)    
$.webshims.polyfill('forms forms-ext');

You can simply write your widgets and your constraints into your form:

<input type="date" />
<input type="date" min="2012-10-11" max="2111-01-01" />
<input type="range" disabled />
<input type="email" required placeholder="Yo you can use a placeholder" />

This will create 3 different widgets and each are configured differently. No extra JS needed just standardized, clean and lean code.

2. Standardized DOM-API

Same goes to the DOM API. Here are just two examples: Combining two date fields and combining a range field with a date field.

3. works without JS in modern browsers

Degrades gracefully in old browsers and works well in modern ones.

4. Less file size in modern browsers

Especially good for mobile (iOS 5, Blackberry have support for date for example)

5. Better UX [mostly mobile]

Better mobile UX (better input UI for touch, better performance, fits to the system), if you are using it: type=”email”, type=”number” and type=”date”/type=”range”

But still, what about customizability?

I’m a developer in a bigger agency and you are absolutely right most clients and most designers won’t tolerate much differences, but I still want to use modern technologies, which means webshims lib can give you the best of both worlds.

Customizing the constraint validation

The polyfilling part

//polyfill constraint validation
$.webshims.polyfill('forms');

Customizing the UI for the error-bubble:

//on DOM-ready
$(function(){
    $('form').bind('firstinvalid', function(e){ 
        //show the invalid alert for first invalid element 
        $.webshims.validityAlert.showFor( e.target ); 
        //prevent browser from showing native validation message 
        return false; 
    });
});

generates the following markup:

<!-- the JS code above will generate the following custom styleable HTML markup for the validation alert -->
<span class="validity-alert-wrapper" role="alert"> 
    <span class="validity-alert"> 
        <span class="va-arrow"><span class="va-arrow-box"></span></span> 
        <span class="va-box">Error message of the current field</span> 
    </span> 
</span>

Customizing the style of an invalid/valid form field:

.form-ui-invalid {
    border-color: red;
}

.form-ui-valid {
    border-color: green;
}

Customizing the text of the validity alert:

<input required data-errormessage="Hey this is required!!!" />

And now, what’s the point:

  1. still works without JS
  2. modern browsers load only the customization code (3kb min/gzipped) and old browsers do load the additional API (about 13kb min/gzip) (forms include a lot more than just constraint validation API, for example there is also autofocus, placeholder, output and so on)

And what is with your special example, customizing the datefield?

No problem:

//configure webshims to use customizable widget UI in all browsers
$.webshims.setOptions('forms-ext', { 
    replaceUI: true
});

$.webshims.polyfill('forms forms-ext');

And also here:

  1. still works without JS in modern browsers
  2. modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate…)

And now, here comes the best:

//configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers
$.webshims.setOptions('forms-ext', { 
    //oh, I know this is bad browser sniffing :-(
    replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent))
});

$.webshims.polyfill('forms forms-ext');
  1. less file size and a better UX for mobile browsers (most clients and most designers will love you for having a different UI in mobile!!!)
  2. still works without JS in modern browsers
  3. modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate…)

Leave a Comment