我使用当前版本的jQuery(1.8.3)和最新版本的jQuery validate(1.10.0),并且似乎在Internet Explorer 8中,jquery validate验证正在验证的表单中的所有输入,而不是只是那些具有规定的规则.它在其他浏览器(IE9,FF,Chrome)中工作正常,如果我使用jQuery validate 1.9.0,它可以正常工作.
以下是一个演示此问题的示例：
<!DOCTYPE html>
<html>
<head>
<title>IE8 + jQuery Validate 1.10 Test</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js'></script>
</head>
<body>
<div>
<form id="my-form">
<label for="my-required-field">required:</label>
<input id="my-required-field" type="text" name="reqField" />
<label for="my-optional-field">optional:</label>
<input id="my-optional-field" type="text" name="optField" />
<input id="wh-submit-button" type="submit" value="submit" />
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
var form = $("#my-form");
var validator = form.validate({
rules: {
"reqField": { required: true }
},messages: {
"reqField": { required: "this field is <i>actually</i> required" }
}
});
$("#wh-submit-button").click(function () {
if (validator.form()) {
alert('passed validation');
}
});
});
</script>
</body>
</html>
在IE8中,“通过验证”警报不会触发,可选字段将被标记为必需.
如果我将可选字段显式标记为不需要,则它可以正常工作：
rules: {
"reqField": { required: true },"optField": { required: false }
}
但是,据我所知,这不是必须将每个不需要显式的输入元素标记为可选的,而且从来没有是先前的要求.
我知道jquery和jquery的早期版本有问题,但是它们表面上已经通过jQuery验证了1.8.1 – 我提出了这个问题,因为它似乎是最新版本的jquery和validate插件.
更新：
因此,当使用Internet Explorer F12开发人员工具来模拟IE8行为时,问题仅出现在本身.基于这样的意见,建议IE8中提供的示例没有实际的问题,我建立了一个完整的Windows VM,并安装了真正的Internet Explorer 8,实际上没有问题.虽然仿真器和真实的东西之间存在明显的差异,但我以前从未看到过JavaScript仿真的这个问题,并且被jQuery验证1.10突然开始发生.
既然这只是一个模仿的问题,而不是真正的事情,这里没有什么可以解决的;我应该透露,这是通过模拟器在第一位…但也许其他人将陷入同一个陷阱,这将是一个有用的参考.
解决方法
尝试这样做…
jsFiddle DEMO using built-in jQuery 1.8.2
jsFiddle DEMO using jQuery 1.8.3
$(document).ready(function() {
var form = $("#my-form");
var validator = form.validate({
rules: {
"reqField": {
required: true
}
},messages: {
"reqField": {
required: "this field is <i>actually</i> required"
}
},submitHandler: function(form) {
alert('passed validation');
// form.submit();
}
});
});
