2

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

虽然表单验证类型有效（错误显示为需要的字段），但<form onsubmit="return verify(this);" >不会阻止调用函数 on。我不确定这是否是一个合理的预期。

其次，作为回退，我在 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/添加了一个演示，但我无法在 IE8 或 IE9 的 IETester 中运行 jsfiddle。这只是一团糟。

4

1 回答 1

3

是的，这是一个合理的期望，提交事件不会被调用而方法可以被调用，但请阅读webshims 的次要抽象部分。你遇到的每一个问题都在这里得到解释，不仅针对表单，还针对所有其他 polyfill。

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

  1. 删除未使用的 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>
  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;
        }
    });
});
于 2013-11-20T09:57:08.587 回答