0

jQuery Validation Pluginを使用してフォームを検証しています。これは完全に検証され、PHPファイルでPOSTを実行し、正しい答えをDIVに挿入します。どうやらすべてが完璧です。

しかし...（常にありますが）

フォームは、送信ボタンを2回以上クリックした場合にのみ送信され、Ajaxの実行や、検証後に発生するその他の処理のために2回以上クリックする必要があります。

誰かがそれがなぜであるかについて何か考えがありますか？

$('#contact-form').validate(
    {
        rules: {
            contact_name: {
                minlength: 3,
                required: true
            },
            contact_email: {
                required: true,
                email: true
            },
            contact_department: {
                required: true
            },
            contact_message: {
                minlength: 2,
                required: true
            },
            contact_agree: {
                required: true
            }
        },
        highlight: function(label) {
            $(label).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(label) {
            label
                    .text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('success');

        },
        submitHandler: function(form) {
            jQuery('#contact-form-submit')
                    .click(function() {
                var btn = $(this);
                btn.button('loading');
                setTimeout(function() {
                    btn.button('reset');
                }, 2000);
            });

            $('#contact-form-submit').click(function(e) {
                $.post("pages/contact/submit", {
                    contact_name: $('#contact_name').val(),
                    contact_email: $('#contact_email').val(),
                    contact_department: $('#contact_department').val(),
                    contact_message: $('#contact_message').val(),
                    contact_agree: $('#contact_agree').val()
                }, function(data) {
                    $('#resultado').html(data);
                });
                e.preventDefault();
            });

        }
    });

誰かが私に例を挙げて答えることができると知っているなら？

4

1 に答える 1

3

あなたの問題は、オプション click()内にハンドラーがあることが原因です。submitHandler:

クリックはコールバックによってすでにキャプチャされているため、再度キャプチャする必要はありませんsubmitHandler:。(同じボタンに2 つのハンドラーもありclick()ます...これは、他の場合でも不必要に冗長になります。 )

ドキュメントに従って：

submitHandler、コールバック、デフォルト: デフォルト (ネイティブ) フォーム送信

「フォームが有効な場合に実際の送信を処理するためのコールバック。唯一の引数としてフォームを取得します。デフォルトの送信を置き換えます。検証後に Ajax を介してフォームを送信する適切な場所です。」

click()代わりにこれを試してください (ハンドラー内のコードが正しいと仮定します)...

submitHandler: function(form) {

        var btn = $('#contact-form-submit');
        btn.button('loading');
        setTimeout(function() {
            btn.button('reset');
        }, 2000);
        $.post("pages/contact/submit", {
            contact_name: $('#contact_name').val(),
            contact_email: $('#contact_email').val(),
            contact_department: $('#contact_department').val(),
            contact_message: $('#contact_message').val(),
            contact_agree: $('#contact_agree').val()
        }, function(data) {
            $('#resultado').html(data);
        });
        return false;

}
于 2013-01-28T21:14:31.203 に答える