javascript - オーバーレイ付きのjqueryツールバリデーター

Question

jQuery ツールのフォームダイアログを使用して、いくつかのバリアント動作が発生しています。つまり、オーバーレイに含まれるフォームでバリデータを使用しています。これが私のコードです（まっすぐにロードする必要があります）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simple</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

  <style type="text/css">
.dialog {
  display: none;
  width: 400px;
  padding:5px;
  background-color:rgba(178, 168, 79, 0.7);
  border:2px solid #666;
  border:2px solid rgba(82, 82, 82, 0.7);
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}

form {
  background:#333;  
  padding:15px 20px; 
  color:#eee;
  width:360px;
  margin:0 auto;
  position:relative;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;  
} 

form input {
  border:1px solid #444;
  background-color:#666;
  padding:5px;
  color:#ddd;
  font-size:12px;

  /* CSS3 spicing */
  text-shadow:1px 1px 1px #000;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;  
}

form input:focus     { color:#fff; background-color:#777; }
form input:active   { background-color:#888; }

fieldset {
 border: 0;
}

.error {
  height:15px;
  background-color:#FFFE36;
  font-size:12px;
  border:1px solid #E1E16D;
  padding:4px 10px;
  color:#000;
  display:none;  

  -moz-border-radius:4px;
  -webkit-border-radius:4px; 
  -moz-border-radius-bottomleft:0;
  -moz-border-radius-topleft:0;  
  -webkit-border-bottom-left-radius:0; 
  -webkit-border-top-left-radius:0;

  -moz-box-shadow:0 0 6px #ddd;
  -webkit-box-shadow:0 0 6px #ddd;  
}

form label {
  display:block;
  font-size:13px;
  color:#ccc;
  padding-bottom: 2px;
}
  </style>
</head>

<body>
<button type="button" name="dlgBtn">Show Dialog</button>
<div class='dialog'>
  <form class='form'>
    <fieldset>
      <label>Name</label>
      <input name="name" type="text" required="required" />
    </fieldset>

    <button type="submit">Submit</button>
  </form>
</div>
</body>

<script>
$("button[name='dlgBtn']").click(function() {
  $("form")[0].reset();
  $("div").data("overlay").load();
}); 

$("form").validator().submit(function() {
  $("div").data("overlay").close();
  alert("Submitted OK!");
  return false;
});

$("div").overlay({top:180, closeOnClick: true, mask: {color: '#fff', loadSpeed: 100, opacity: 0.5}});
</script>
</html>

このコードには次の問題があります（この質問にとって重要な順序で）-

Chrome 8.0.552.231 では、「必要な」バリデーターの失敗によってフォームの送信が停止されません (FF では停止します)。
Chrome では、エラーメッセージはダイアログに関連して表示されませんが、ドキュメントの本文に表示され、ダイアログが閉じられると表示されます。
Firefox 4b7 では、バリデーターの初期化時に位置設定に関係なく、バリデーターエラーが入力の下に表示されます。デフォルトでは右側に表示されます。
FF では、form.reset() はフォームをリセットしません (クロムではリセットします)。これは、送信後にもう一度ダイアログを開くことでテストできます。一見、jquery Tools に関連しているようには見えませんが、入れてみようと思いました:)。
Chrome では、フィールドの境界線は最初は赤ではありません (FF にあります)。
FF では、選択されたときにフィールドの境界線が青色に変わりません (Chrome では青色になります)。
FF と Chrome のエラーメッセージテキストは異なります

他の人も同じ行動を見ていますか？そのコードを修正して、両方のブラウザで漠然と同じように動作させることはできますか? 乾杯、

score 2 · Accepted Answer

ここに私の最初の試みがあります:例のリンク

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Simple</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

        <style type="text/css">
            #dialog {
                display: none;
                width: 400px;
                padding:5px;
                background-color:rgba(178, 168, 79, 0.7);
                border:2px solid #666;
                border:2px solid rgba(82, 82, 82, 0.7);
                -moz-border-radius:6px;
                -webkit-border-radius:6px;
            }

            form {
                background:#333;
                padding:15px 20px;
                color:#eee;
                width:360px;
                margin:0 auto;
                position:relative;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
            }

            form input {
                border:1px solid #444;
                background-color:#666;
                padding:5px;
                color:#ddd;
                font-size:12px;

                /* CSS3 spicing */
                text-shadow:1px 1px 1px #000;
                -moz-border-radius:4px;
                -webkit-border-radius:4px;
            }

            form input:focus     { color:#fff; background-color:#777; }
            form input:active   { background-color:#888; }

            fieldset {
                border: 0;
            }

            .error {
                height:15px;
                background-color:#FFFE36;
                font-size:12px;
                border:1px solid #E1E16D;
                padding:4px 10px;
                color:#000;
                display:none;
                z-index: 9999;

                -moz-border-radius:4px;
                -webkit-border-radius:4px;
                -moz-border-radius-bottomleft:0;
                -moz-border-radius-topleft:0;
                -webkit-border-bottom-left-radius:0;
                -webkit-border-top-left-radius:0;

                -moz-box-shadow:0 0 6px #ddd;
                -webkit-box-shadow:0 0 6px #ddd;
            }
            .error p {margin: 0}
            form label {
                display:block;
                font-size:13px;
                color:#ccc;
                padding-bottom: 2px;
            }

            .hidden {display: none}
        </style>
    </head>

    <body>
        <button type="button" name="dlgBtn">Show Dialog</button>
        <div id='dialog'>
            <form id='form'>
                <fieldset>
                    <label>Name</label>
                    <input name="name" type="text" required="required" />
                </fieldset>
                <input type="reset" class="hidden" />
                <button type="submit">Submit</button>
            </form>
        </div>
    </body>

    <script>
        $("button[name='dlgBtn']").click(function() {
            $(":reset", "#form").click();
            $dialog.load();
        });

        // this is the object API and NOT the object itself!
        var $form = $("#form").validator({ position: 'center right' }).submit(function(e) {
            // Now this is the form object
            var form = $(this);

            // client-side validation OK.
            if (!e.isDefaultPrevented()) {
                // The ajax call; use the form object above to get the action attr, serialize..etc
                // more: http://flowplayer.org/tools/demos/validator/server-side.html
                //$.ajax({...})

                // BEGIN: THESE WILL GO IN THE SUCCESS METHOD OF THE AJAX CALL
                alert("Submitted OK!");
                $form.reset();
                $dialog.close();
                // END: THESE WILL GO IN THE SUCCESS METHOD OF THE AJAX CALL

                // THIS IS OUTSIDE THE AJAX CALL
                e.preventDefault();
            }
        }).data('validator');

        // this is the object API and NOT the object itself!
        var $dialog = $("#dialog").overlay({top:180, closeOnClick: true, mask: {color: '#fff', loadSpeed: 100, opacity: 0.5}}).data("overlay");

        // Without this, Error messages will remain visible
        $dialog.onBeforeClose(function(){
            $form.reset();
        });

        // This is to keep the error message next to it's corresponding input
        $(window).scroll(function() {
            $form.reflow();
        });
    </script>
</html>

EDIT : 追加された質問への回答
1. Chrome 8.0.552.231 では、「必要な」バリデーターの失敗によってフォームの送信が停止されません (FF で停止します)。 2. Chrome では、エラーメッセージはダイアログに関連して表示されませんが、ドキュメントの本文に表示され、ダイアログが閉じると表示されます
。これは、オーバーレイの z-index が 9998 で、error div を 9999 に設定すると 3 が修正されたためです。デフォルトでは右側に表示されます。FF のバグかどうかはわかりません (残念ながら私は FF 4 を使用していません) 。

{ position: 'center right'
4. FF では、form.reset() はフォームをリセットしません (chrome ではリセットされます)。これは、送信後にもう一度ダイアログを開くことでテストできます。一見、jquery Tools に関連しているようには見えませんが、入れてみようと思いました:)。
非表示のリセットボタンを使用すると、ジョブが実行され、$form 変数のあとがきが 役立ちます
。選択してもボーダーが青くならない(Chromeではそうなります)多分上記2点はBrowser(+OSのテーマ)関連 7.FFとChromeでエラーメッセージの文面が違いますここは同じです..

javascript - オーバーレイ付きのjqueryツールバリデーター

1 に答える 1

Related

Reference