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')。[削除] ボタンをクリックすると、フォームが含まれるダイアログが開き、そのフォームが検証されると (ラジオ ボタンがオンになり、[削除] ボタンがクリックされると)、2 番目の関数 (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属性を削除しました。formsubmitHandler

例: 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 に答える