html5, modernizr, yepnope, webforms2 issue

Question

I am trying to use polyfills for the first time for a HTML5 form and I only want to serve the code to the browsers that need it (thus modernizr2/yepnope).

First thing to add is that the javascript is definately loaded on FF3.6 for example, so thats not the issue.

Basically this is my modernizr/yepnope code:

<script>
    $(document).ready(function() {
        yepnope({
            test: Modernizr.input.required && Modernizr.input.placeholder && Modernizr.input.pattern && Modernizr.input.autofocus,
            nope: '/_scripts/polyfills/webforms2/webforms2-p.js'
        });
    });
</script>

In my HTML5 form i have various input fields with the placeholder attribute, and it all looks lovely in the newest browsers (FF4, etc) yet when I run it on FF3.6 I see nothing. Yet all the various other demos i see on the internet using webforms2 seem to have placeholder elements fine.

I have other html5 form things I want webforms2 to polyfill but the only one seemingly in action is 'autofocus' working on the top field.

Am I missing something really obvious somewhere?

Any help/suggestions much appreciated.

Adi.

Answer 1

you can use it this way. But, I don't think it is a good idea. webshims lib adds some nice extensions to webforms (styling error bubble/changing validation text) and also fixes some bugs, which aren't featuredetected with modernizr. Addiotionally, I'm pretty sure you won't see a performance improvement (polyfiller.js is too small). In fact due to the fact, that you first load polyfiller and then the shims, you will have some small performance "penalty" for a lot of browsers. This said, here is, how you could do this:

I have added this warning because I know, that a lot of people simply add everything inside a DOM-Ready callback.

//this is not what you should do:
$(document).ready(function(){
   $.webshims.polyfill('forms');
});

//instead do this:
$.webshims.polyfill('forms');
$(document).ready(function(){
   //DOM and forms feature are available
});

If you want to load polyfill.js dynamically, you have to do 2 things extra:

1. specify the path to the polyfills (this is not needed with normal embedding because we can get the script-path of the last script)

You do this, the follwoing way:

$.webshims.loader.basePath = 'path-to-shims-folder/';
$.webshims.polyfill();

1. Only If you wan't to script an HTML5 feature on DOM-Ready (not if you want to script a feature on submit, invalid, input etc.)

You have to use the extra ready-method from webshims, because the DOM-Ready may already occure, before the scripts are loaded (normally, webshims delays the ready event to make this handling smooth)

You can do this with the following code:

$.webshims.ready('forms DOM', function(){
   //give me the validationMessage of the first input
   alert($('input').attr('validationMessage');
});

If you only need standard features and don't want to script webshims, this is the way you should go:

yepnope({ 
    test: blah, 
    nope: '/_scripts/polyfiller.js', 
    complete: function () { 
        $.webshims.loader.basePath = '/_scripts/shims/';
        $.webshims.polyfill('forms');
    } 
});

If you want to script right after DOM-Ready/Feature-Loading, you should do the following:

yepnope({ 
    test: blah, 
    nope: '/_scripts/polyfiller.js', 
    complete: function () { 
        $.webshims.loader.basePath = '/_scripts/shims/';
        $.webshims.polyfill('forms');
        $.webshims.ready('forms DOM', function(){
            //give me the validationMessage of the first input
            alert($('input').attr('validationMessage');
        });
    } 
});

In both cases, the script warnings will stay, but only interested developers will see them.

Some informations about the current state of webshims lib version 1.5.2 /HTML5 forms. There are two knwon issues:

1. calling $.webshims.activeLang won't work initially (This method was moved from polyfiller to domextend)
2. I have misunderstood a part of the HTML5 specification (and mixed my implementation with an old specification) about interactive constraint validation vs static constraint validation. The result is, that Operas and my implementation of checkValidity is not right, so don't use this :-).

Both bug are already fixed. I will spend some time to make extra tests, so you can expect a bugrelease this weekend :-). If you need some of those features, you can grab the current master branch (it's quite stable, but I need to do more x-browser testing, before releasing it)

Something about some performance rules:

Most yslow rules were written in 2006. A lot has changed since then:

1. JS does not fully block anymore. (only IE6 and IE7 have these problems. but 80% of browser don't)
2. Most browser can load more than 2 (mostly between 4-8) files at the same time

From my tests loading between 6 and 12!!! (yes 12 files) js-files is much faster than loading one single js file (Test was done on multiple real life websites with different amount and size of css and images).

Putting JS at the bottom does not decrease page load time. Putting JS at bottom only decreases so called white page time, but this always leads to Flash of unstyled / unbehaviored content. If you don't like FOUC, put JS at Top. If you want a mix use a scriptloader (decreasing white page time, with less FOUC) in the HTML head and load your scripts from there.

Answer 2

1. You don't need to include yepnope inside of domready. If you do so, your "polyfilling" will take some extra time. (But, I think, webforms2 can't be loaded asnyc or defered)
2. I don't know your exact problem. There are some known issues with webforms2, but zoltan dulac and weston ruter seem to work on those.
3. I would suggest you to use webshims lib. It's a newer project and implements the current state of forms (and gives you also the possibility to include other polyfills. It also uses modernizr, but currently comes with its own scriptloader (This will be changed in future versions), but you can use yepnope to load other scripts/styles/polyfills, if you want.

regards alex

disclosure: I'm the creator of webshims lib...