Question

I’m validating a form with the help of jQuery Validation Plugin, it validates perfectly and also perform POST in my PHP file and insert the correct answer in the DIV. Apparently everything is PERFECT.

But … (There’s always a but)

The form is sent only when I click on submit button more than once, have to click twice or more for the Ajax run and also other things that should happen after validation.

Does anyone have any idea why is that?

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

        }
    });

If anyone knows could answer me with an example?

Answer 1

Your problem is being caused by having a click() handler(s) inside of the submitHandler: option.

There is no need to capture the click again since it was already captured once by the submitHandler: callback. (You also have two click() handlers on the same button… this would be unnecessarily redundant in any other case as well.)

As per the documentation:

submitHandler, Callback, Default: default (native) form submit

“Callback for handling the actual submit when the form is valid. Gets
the form as the only argument. Replaces the default submit. The right
place to submit a form via Ajax after it validated.”

Try this instead (assumes the code inside your click() handlers is correct)…

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;

}