webshim and checkValidity() in IE8

Question

Following from Manually invoke HTML5 form validation, I've now tried using webshims to provide HTML5-like form validation in older versions of IE.

Whilst the form validation sort of works (the errors are displayed for fields that have required), the function on <form onsubmit="return verify(this);" > is not prevented from being called. I'm not sure if it's a reasonable expectation for this to occur.

Secondly, and as fall back, I've added a check in the verify() function to only continue if the form is valid. To this end, I've added the following code to the verify() function().

function verify(theForm) {
    form = theForm;

    if (!form.checkValidity()) {
        return false;
    }

    /* continue with recaptcha processing */
}

I'm using IE8 in IETester, because I don't have a real version of IE8 to test with. It's Javascript debugging seems to suggest that checkValidity() doesn't exist on the form. I think there is a reasonable expectation that checkValidity should exist for the form, since that is the purpose of webshims.

My initialisation code in the html head is

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/branding/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
    $.webshims.polyfill('forms');
</script>

Which is pretty close to the documented method of getting it going. And webshims seems to be operating in part, because the error messages of required fields missing are displaying.

I've added a demo of what is happening at http://jsfiddle.net/BqW9D/2/, but I can't run jsfiddle in IETester with IE8 or IE9. It's just a mess.

Answer 1

Yes it is a reasonable expectation, that submit event is not called and methods can be called, but please read the Minor abstraction section of webshims. every problem you have is explained there not only for forms but also for all other polyfills.

Main issues: - Do not use inline event handlers! - Methods are only polyfilled if you opt-in to this (extendNative) (Because those consume a lot of memory) For methods the best option is to use webshims callProp extension.

1. Remove unused Modernizr:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="/branding/js-webshim/minified/polyfiller.js"></script>
<script>
    //webshims.setOptions('extendNative', true); //either use this or use $.callProp
    webshims.polyfill('forms');
</script>

1. Remove inline event handler (those are beeing considered as bad bad practice)

Code:

<form class="validate">
    <input name="texbox" type="text" required="required" />
    <input type="submit" />
</form>

3.: Now use JS to do something with you form

Code:

$(function(){
    //add events to submit and/or invalid
    $('form.validate').on('submit invalid', function(){
        if(window.console){
            console.log(e.type)
        }
        if(e.type == 'submit' && !$(this).callProp('checkValidity')){
            return false;
        }
    });
});