Question

从Manually invoke HTML5 form validation开始，我现在尝试使用webshims在旧版本的IE中提供类似HTML5的表单验证。

虽然表单验证类型有效（对于需要的字段显示错误），但不会阻止调用<form onsubmit="return verify(this);" >上的函数。我不确定是否合理期望这种情况发生。

其次，作为后退，我在verify（）函数中添加了一个检查，只有在表单有效时才会继续。为此，我将以下代码添加到verify（）函数（）。

function verify(theForm) {
    form = theForm;

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

    /* continue with recaptcha processing */
}

我在IETester中使用IE8，因为我没有真正的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/正在发生的事情的演示，但我无法在IETester中使用IE8或IE9运行jsfiddle。这只是一团糟。

Answer 1

是的，这是一个合理的期望，没有调用提交事件并且可以调用方法，但请阅读次要abstraction section of webshims。你所遇到的每一个问题都不仅解释了形式，还解释了所有其他的填充物。

主要问题： - 不要使用内联事件处理程序！ - 如果您选择加入此方法（extendNative），方法只会被填充（因为这些方法占用大量内存）对于方法，最好的选择是使用webshims callProp扩展名。

删除未使用的Modernizr：

代码：

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

删除内联事件处理程序（那些被认为是糟糕的不良做法）

代码：

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

IE8中的webshim和checkValidity（）

1 个答案: