使用 jQuery 验证插件 (v1.10.0) 和 jQueryUI 对话框(v1.9.0，而不是 CDN 的 1.9.1)验证表单，当然 jQuery (v1.8.2) 会刷新页面IE7 和 IE8 不会产生任何错误，同时它与任何其他经过测试的浏览器(Chrome、Firefox、Safari 和 IE9)都可以正常工作。
完整代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link id="theme" rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/redmond/jquery-ui.css" media="screen" />
<script type="text/javascript">
var deleteTestAndReload;
var deleteTestWithMotive;
var display;
$(document).ready(function(){
var $deleteTestDialog = $('<div id="delete-test-dialog"></div>').dialog({
autoOpen: false,
title: 'Delete test',
height: 340,
width: 590,
modal: true,
position: ['center', 50]
});
deleteTestAndReload = function() {
alert("Aouch, Charlie!");
$deleteTestDialog.dialog('close');
}
deleteTestWithMotive = function() {
html = ' <form id="delete-test-dialog-form" name="delete-test-dialog-form" onsubmit="deleteTestAndReload(); return false;" method="post">\n';
html += ' Why?<br />\n';
html += ' <input type="radio" id="motive-1" name="motive" value="1" checked="checked" />Charlie bit me<br />\n';
html += ' <div style="text-align:right;">\n';
html += ' <button id="validate_test_deletion" name="validate_test_deletion" type="submit" value="test_deletion">Delete</button>\n';
html += ' </div>';
html += ' </form>\n';
$("#delete-test-dialog").html(html);
$("#delete-test-dialog-form").validate({
rules: {
motive: { required: true }
}
});
$("#validate_test_deletion", "#delete-test-dialog-form").button();
}
display = function() {
alert('display');
html = '<button type="button" name="delete_test" value="delete_test" class="my-buttonset-button" onclick="deleteTestWithMotive();">Delete</button>\n';
$("#main-content").html(html);
$("button[name='delete_test']").button().click(function() {
$deleteTestDialog.dialog('open');
return false;
});
}
display();
});
</script>
</head>
<body>
<div id="main-content" class="main-content"></div>
</body>
</html>
加载时，将调用第一个 JavaScript 警报(“显示”)。 单击“删除”按钮时，将打开一个对话框，其中包含一个表单，并且当验证该表单(选中单选按钮并单击“删除”按钮)时，将调用第二个函数(deleteTestAndReload)，该函数会发出一条消息警报(它会在完整版)并关闭对话框实例。
在 IE7/IE8 上，页面刷新并显示第一个警报(“显示”)(重新加载是错误，因为它不应该)。
但是，如果我删除以下验证代码，它无需重新加载即可工作。
$("#delete-test-dialog-form").validate({
rules: {
motive: { required: true }
}
});
所以我假设验证表单时出现问题。
最佳答案
亚历克斯，
您可以更改几个选项以使其能够跨浏览器工作。我继续在 jsFiddle http://jsfiddle.net/cWea7/ 中重新创建了您的上述场景这样我就可以进行一些调整并在下面展示它们。
选项 1
设置 validate 插件时使用 submitHandler 属性
$("#delete-test-dialog-form").validate({
submitHandler: deleteTestAndReload,
rules: {
motive: {
required: true
}
}
});
注释:我从 form 标记中删除了 onsubmit 属性，因为该属性将由 submitHandler 处理，如上面的代码片段所示。
示例:http://jsfiddle.net/cWea7/9/
选项 2
在 submit 事件处理程序中，使用插件的 valid 方法手动检查表单的有效性。
deleteTestAndReload = function( e ) {
e.preventDefault();
if ( $("#delete-test-dialog-form").valid() ) {
alert("Aouch, Charlie!");
$deleteTestDialog.dialog('close');
}
};
注释:我从 form 标记中删除了 onsubmit 属性，而是使用 jQuery 来连接 submit 事件。
关于jQuery验证插件刷新IE8，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13249537/