继Manually invoke HTML5 form validation之后,我现在尝试使用webshims在较旧版本的IE中提供类似HTML5的表单验证。
虽然表单验证可以工作(对于有需要的字段显示错误),但不会阻止调用<form onsubmit="return verify(this);" >
上的函数。我不确定这是否是合理的预期。
其次,作为回退,我在verify()函数中添加了一个check,以仅在表单有效时继续。为此,我在verify()函数中添加了以下代码。
function verify(theForm) {
form = theForm;
if (!form.checkValidity()) {
return false;
}
/* continue with recaptcha processing */
}
我在IETester中使用IE8,因为我没有真正的IE8版本来测试。它的JavaScript调试似乎表明在窗体上不存在CuffValueID()。我认为有一个合理的期望,检查有效性应该存在的形式,因为这是目的的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。只是一团糟。
最佳答案
是的,这是一个合理的预期,提交事件不被调用,方法也可以被调用,但是请阅读小的abstraction section of webshims。你所遇到的每一个问题不仅在表格中被解释,而且在所有其他的填充物中也被解释。
主要问题:
-不要使用内联事件处理程序!
-方法是多填充的,如果您选择使用这个(扩展的)(因为那些方法消耗大量内存)对于方法,最好的选择是使用webshims callProp扩展。
删除未使用的现代化:
代码:
<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;
}
});
});