jQuery Validation Plugin -- form is sent only when I click on submit button more than once

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?

Sparky · Accepted Answer · 2013-01-28 21:40:55Z

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;

}

Collectives™ on Stack Overflow

jQuery Validation Plugin -- form is sent only when I click on submit button more than once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related