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

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