Question

使用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'）。单击“删除”按钮时，将打开一个对话框，其中包含一个表单，并且在验证该表单时（选中单选按钮并单击“删除”按钮），将调用第二个函数（deleteTestAndReload）来警告消息（它会触发ajax调用完整版）并关闭对话框实例。

在IE7 / IE8上，页面刷新并显示第一个警告（'display'）（重载是错误，因为它不应该）。

但是，如果我删除以下验证码，则无需重新加载。

$("#delete-test-dialog-form").validate({
    rules: {
        motive: { required: true }
    }
});

所以我在确认表格时会出现问题。

Answer 1

亚历，

您可以通过几个选项进行更改以使其跨浏览器工作。我继续在jsFiddle http://jsfiddle.net/cWea7/中重新创建了上面的场景，以便我可以进行一些调整并在下面显示它们。

选项1

设置submitHandler插件时使用validate属性

$("#delete-test-dialog-form").validate({
    submitHandler: deleteTestAndReload,
    rules: {
        motive: {
            required: true
        }
    }
});

注意：我从onsubmit标记中删除了form属性，因为它将由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');
    }
};

注意：我从onsubmit标记中删除了form属性，而是使用jQuery连接submit事件。

示例：http://jsfiddle.net/cWea7/8/

jQuery验证插件刷新IE8

1 个答案:

选项1

选项2