CODEWITHSUNDEEP
jqueryjquery-validate
Renato
Renato

Reputation: 345

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

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?

Upvotes: 0

Views: 743

Answers (1)

Sparky
Sparky

Reputation: 98758

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;

}

Upvotes: 3

Related Questions