7

私はこれに何時間も費やしましたが、なぜこの jquery validate() が機能しないのかわかりません。私は最終的にそれを最小限に抑えましたが、それでも機能しません。これは実際のコードです：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>

    <script>

        $(document).on("click", "#submit", function() {

            $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

            return false;
         });

    </script>

</head>
<body>

    <form id="form">
        <input type="text" value="" name="input" id="input" />
    </form>
    <a href="#" id="submit">submit</a>

</body>
</html>

ここで明らかな何かが欠けていますか？「送信」をクリックしてもエラーは発生せず、何も起こりません。

更新:「クリック」イベントの外にある validate() をドキュメントの「準備完了」イベントに移動しました。ドキュメントが読み込まれると、コンソールに「何も選択されていません。検証できません。何も返されません」というメッセージが出力されます。明らかに動作させたい方法ではないので、クリックイベントに添付するにはどうすればよいですか?

更新 2: @NXT のおかげで、最終的に検証を実行しましたが、「submitHandler」はまだ機能しておらず、ページをリロードせずにフォームを送信する必要があるため、それを使用して Ajax 呼び出しを行う必要があります。

4

2 に答える 2

7

送信ボタンをフォームの外に意図的に配置しましたか? クリックしたときにフォームを送信するように変更しました。動作するようになりました - 検証メッセージが表示され、警告メッセージも表示されます (何らかのコンテンツを含むフォームを送信すると)。以下のコード部分を使用するか、オンラインで試してください - http://jsfiddle.net/Vcmfs/

頭：

<script>
    $(function(){
        $("#form").validate({
                rules: {
                    input: { required: true}
                },
                messages: {
                    input: { required: "required" }
                },
                ignore:      "",
                errorClass:  'fieldError',
                onkeyup:     false,
                onblur:      false,
                errorElement:'label',
                submitHandler: function() {                        
                    alert("alert");
                }
            });

        $("#submit").click(function(){
            $("#form").submit();
            return false;
        });
    });
</script>

体：

<form id="form">
    <input type="text" value="" name="input" id="input" />
</form>
<a href="#" id="submit">submit</a>
于 2013-01-28T14:12:12.830 に答える
6

.validate()実際に検証を実行するのではなく、検証用にフォームを構成します。

送信リンクを送信ボタンに変更する<input type='submit' value='Submit'/>と、期待どおりに機能します。

もう 1 つのオプションは.valid()、検証をトリガーするリンク クリック ハンドラーを呼び出すことです。

実際の例については、このフィドルを参照してください: http://jsfiddle.net/v5HQr/1/

于 2013-01-28T14:05:04.297 に答える