1

フォーム内の複数の要素を監視し、すべての要素が正常に検証された場合にのみ送信ボタンを有効にします。これが私が試みたものです：-

$('#beta_signup_form').validate({
    rules: {
        name: {
            required: true,
            minlength: 4
        },
        email: {
            required: true,
            email: true 
        }
    },
    focusCleanup: true,
    onkeyup: false,
    errorElement: "span",
    submitHandler: function(form) {
        if ($('#beta_signup_form').valid()) {
            console.log("now we enable the submit button!");
        }   
    }

});

更新

送信ボタンを有効にして、ユーザーがそれをクリックしてajax呼び出しを行ってフォームを送信できるようにする前に、submitHandlerがトリガーされ、すべてのフィールドが有効であることを確認するif条件が期待されていました。if ($('#beta_signup_form').valid())

しかし、どういうわけか、すべてのフィールドが有効な場合、何もトリガーされません。

私は自分が間違っていることを理解しました。それは、submitHandler属性が「検証されたすべてのフィールド」イベントの検出とは何の関係もないということです。submitHandlerフォームボタンをクリックした場合にのみ属性が起動されますが、これは必要なものではありません。

だから私の質問は-私がバインドする必要があるイベントはどれですか？フォームのすべてのフィールドが検証されるときにトリガーを設定するために使用できる属性はありますか？

フォームのhtmlコードは次のとおりです。-

    <form id="beta_signup_form" postUrl="{% url 'signups_beta_users' %}" method="post" csrf_token="{{ csrf_token }}">{% csrf_token %}
        <div>
            <input type="text" id="name" name="name" placeholder="Name" />
        </div>
        <div>
            <input type="email" id="email" name="email" placeholder="Email address" />
        </div>
        <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
        <div class="loading"></div>
    </form>
4

3 に答える 3

2

このコードは私にとって完璧に機能します（ここを参照してください：http：//jsfiddle.net/tCpXT/）：

            <form id="beta_signup_form" postUrl="" method="post">
                <div>
                    <input type="text" id="name" name="name" placeholder="Name" />
                </div>
                <div>
                    <input type="email" id="email" name="email" placeholder="Email address" />
                </div>
                <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
                <div class="loading"></div>
            </form>​
    <script type="text/javascript">
            $(document).ready(function() {
                $("#beta_signup_form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 4
                    },
                    email: {
                        required: true,
                        email: true 
                    }
                },
                submitHandler: function(form) {
                    if ($("#beta_signup_form").valid()) {
                        alert('now we enable the submit button!');
                    }   
                }
                });

            });
            </script>
于 2012-12-07T13:55:20.350 に答える
2

私の答え：

$(document).ready(function() {
    $("#beta_signup_form").validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        submitHandler: function(form) {
            alert('submitted');
        }
    });
});​

OPが求めていることを実行するために特別な機能は必要ないことを示すために、以前に受け入れられた回答に応じて回答を投稿します。.validate()プラグインはすでにデフォルトでこのように動作します。

これは、受け入れられた回答からのjsFiddleです：http： //jsfiddle.net/99mbLp1b/

その答えの中で、唯一の違いは、内で使用される条件付きコードのこのビットですsubmitHandler。

submitHandler: function(form) {

    if ($("#beta_signup_form").valid()) {
        alert('now we enable the submit button!');
    }  

}

ドキュメントによると、ThesubmitHandlerは「フォームが有効なときに実際の送信を処理するためのコールバック」です。

したがってsubmitHandler、フォームが有効な場合にのみが呼び出される場合、この条件付きチェック全体は完全に不要であり、不要です...

if ($("#beta_signup_form").valid()) { ... };

フォームがまだ有効でない場合は関数trueに入ることがないため、常にそうなります。submitHandler

証明についてはデモを参照してください：http： //jsfiddle.net/uehu47w1/

ご覧のとおり、他の回答内のjsFiddleと同じように動作します。

于 2012-12-11T20:48:28.260 に答える
-1

たぶんあなたも0をテストする必要があります（ここを参照してください：jQuery Validation `valid（）`メソッドはrequiredがtrueでない場合に0を返します）

だからそれは：

 if (($('#beta_signup_form').valid())||($('#beta_signup_form').valid()=="")) {
        console.log("now we enable the submit button!");
    }
于 2012-12-07T11:08:36.997 に答える