webshim和checkValidity()在IE8中的应用

Question

继手动调用HTML5表单验证之后，我现在尝试使用webshims在早期的IE版本中提供类似HTML5 5的表单验证。

虽然表单验证类工作(对于需要的字段显示错误)，但<form onsubmit="return verify(this);" >上的函数并没有被调用。我不确定这是否是一个合理的预期会发生。

其次，在fall back中，我在verify()函数中添加了一个检查，仅在表单有效的情况下继续。为此，我将下面的代码添加到verify()函数()中。

function verify(theForm) {
    form = theForm;

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

    /* continue with recaptcha processing */
}

我在IETester中使用IETester，因为我没有真正的IE8版本可供测试。Javascript调试似乎表明表单上不存在checkValidity()。我认为有一个合理的期望，checkValidity应该存在于表单中，因为这就是webshims的目的。

我在html头中的初始化代码是

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

这与文件记载的方法非常接近。而webshims似乎在运行，部分原因是缺少所需字段的错误消息正在显示。

我添加了一个在http://jsfiddle.net/BqW9D/2/中正在发生的事情的演示，但是我不能用IE8或IE9在IETester中运行jsfiddle。只是一团糟。

Answer 1

是的，这是一个合理的期望，提交事件是不调用和方法可以调用，但请阅读次要的webshims的抽象部分。你所遇到的每一个问题都会在那里被解释，不仅是为了表格，也是为了所有其他的填充物。

主要问题：-不要使用内联事件处理程序！-方法只有在选择-in (extendNative) (因为这些方法占用大量内存)的情况下才会被多填充，最好的选择是使用webshims callProp扩展。

1. 删除未使用的现代化：

代码：

<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. 删除内联事件处理程序(那些被认为是错误实践的事件处理程序)

代码：

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

3.：现在使用JS对您的表单做一些事情

代码：

$(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;
        }
    });
});