0

3 つの Web フォームを含む Web ページがあります。最初の 2 つはデジタル入力が必要で、最後の 1 つは空ではない可能性があります。

3 つのテキスト フィールドが表示された Web フォームで、そのうちの 2 つに無効な入力が含まれています

縮小され、すぐに実行できるテスト ケースを次に示します。

<html>
<head>
<style>
.invalid {
        border: 2px solid #FF0000;
        background-color: #FFCCCC;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
        //$('body').click(....)
        $('#cl_txt, #mks_txt, #comment_txt').blur(function() {
           $('#cl_txt, #mks_txt, #comment_txt').removeClass('invalid');
        });

        $('#mks_btn').click(function(e) {
            if (! $('#mks_txt').val().match(/^[0-9]{6,}$/i)) {
                $('#mks_txt').addClass('invalid');
                e.preventDefault();
            }
        });
        $('#cl_btn').click(function(e) {
            if (! $('#cl_txt').val().match(/^[0-9]{6,}$/i)) {
                $('#cl_txt').addClass('invalid');
                e.preventDefault();
            }
        });
        $('#comment_btn').click(function(e) {
            if ($('#comment_txt').val().length < 2) {
                 $('#comment_txt').addClass('invalid');
                 e.preventDefault();
            }
        });
});
</script>
</head>
<body>
<table border=1>
<form><tr><th>MKS</th><td>
<input name="toggle_mks" id="mks_txt" type="text" size="10">
<input type="submit" id="mks_btn" value="Add MKS" class="toggle">
</td></tr>
<form><tr><th>CL</th><td>
<input name="toggle_cl" id="cl_txt" type="text" size="10">
<input type="submit" id="cl_btn" value="Add CL" class="toggle">
</td></tr></form>
<form><tr><th>Comments</th><td>
<textarea name="comment" id="comment_txt" rows="4" cols="40">
</textarea>
<input type="submit" id="comment_btn" value="Add comment" class="toggle">
</td></tr></form>
</table>
</body>
</html>

無効なテキストが入力され、対応する送信ボタンがクリックされた場合、.invalidクラスをそのテキスト フィールドまたはテキスト領域に追加して、赤く表示します。

私の問題は、ユーザーが考えを変えて、その Web フォームを再度送信しないことにした状況を処理することです。代わりに、別の Web フォームをクリックするか、Web ページのどこかをクリックするだけです。

その場合、赤い.invalidクラスをテキスト要素#cl_txt、#mks_txt、および#comment_txt から再度削除したいと思います。でもアレンジの仕方がわからない。$('#cl_txt, #mks_txt, #comment_txt').blur(....)を設定しようとしましたが、一貫して機能しません。代わりに$('body').click(....)を試しましたが、フォームの検証が壊れているようで、テキスト フィールドが赤く塗られることはありません。

何か助けてください。

4

1 に答える 1

1

jQuery 外部イベントプラグインを使用してみてください。また、デモもご覧ください。主なアイデアは、要素clickoutside(またはdblclickoutside) イベントに委譲し、それが発生したときに何が起こるかを指定することです。

それが役立つことを願っています。

于 2011-01-18T10:30:04.403 に答える