Question

我在jQuery Validation Plugin的帮助下验证表单，它完美验证并在我的PHP文件中执行POST并在DIV中插入正确的答案。显然一切都很完美。

但......（总有一个但是）

只有在我多次单击“提交”按钮时才会发送表单，必须单击两次或更多次以进行Ajax运行以及验证后应该发生的其他事情。

有谁知道为什么会这样？

$('#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();
            });

        }
    });

如果有人知道可以用一个例子来回答我？

Answer 1

您的问题是由click()选项中包含submitHandler:个处理程序引起的。

没有必要再次捕获点击，因为submitHandler:回调已经捕获了一次。（你在同一个按钮上也有两个click()处理程序......在任何其他情况下，这都是不必要的冗余。）

As per the documentation：

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;

}

jQuery Validation Plugin - 只有在我多次点击提交按钮时才会发送表单

1 个答案: