2

使用 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 上，页面刷新并显示第一个警报（“显示”）（重新加载是错误，因为它不应该）。

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

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

所以我假设在验证表单时出现问题。

4

1 回答 1

0

亚历克斯，

您可以更改几个选项以使其跨浏览器工作。我继续在 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/

于 2013-01-03T20:00:32.347 回答