0

我在 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();
            });

        }
    });

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

4

1 回答 1

3

您的问题是由选项 click()内部的处理程序引起的。submitHandler:

无需再次捕获点击，因为它已经被submitHandler:回调捕获一次。（您在同一个按钮上也有两个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 回答