jQuery验证插件刷新IE8
使用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警报被称为('display')。
但是，如果我删除以下验证代码，它将不需要重新加载即可工作。
$("#delete-test-dialog-form").validate({
rules: {
motive: { required: true }
}
});因此，我假设在验证表单时出现了错误。
回答 1
Stack Overflow用户
发布于 2013-01-04 04:00:32
亚历克斯
您有几个选项可以更改，以使其跨浏览器工作。我继续在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事件。
示例：http://jsfiddle.net/cWea7/8/
https://stackoverflow.com/questions/13249537
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号