Button loading and control property not getting changed on form submit

Question

So I have a form which I validate before submit using jquery-form-validator plugin! But the problem here is few lines written on success is not getting executed when it goes step by step. However, they work fine if executed in console or executed with debugger. Really a wiered behavior!! Any workaround to come over from this?

JS

$.validate({
    form:'#contact-form',
    onError: function () {
        toastr.error("Please correct the below errors!", "Error");
        return false;
    },
    onSuccess: function () {
        $("#btnContactUs").button('loading'); //Not getting called
        $('.form-contact form').find('input,textarea').attr('readonly', true).addClass('disabled'); //Not getting called
        var formdata = new FormData($('.form-contact form').get(0));
        $.ajax({
            url: $("#contact-form").attr('action'),
            type: 'POST',
            data: formdata,
            processData: false,
            contentType: false,
            success:function(data)
            {
                if(data.result)
                {
                    toastr.success(data.message, "Success");
                    $('.form-contact form').get(0).reset();//Check this
                }
                else
                {
                    toastr.error(data.message, "Error");
                }
            },
            error:function(data)
            {
                toastr.error(data.message, "Error");
            }
        });
        $("#btnContactUs").button('reset');
        $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
        return false; // Will stop the submission of the form
    }
});

On validation success it calls the Controller method through ajax but without executing first 2 lines.

UPDATE: Button #btnContactUs is a bootstrap button which has .button functionality to show loading text.

Answer 1

Your onSuccess() method's return false is executing before your inner ajax success callback can run. When you put a debugger, the ajax success callback event occurs and your code runs fine.

We can solve this with $.when and .then functionality of jquery as below:

$.when(
            $.ajax({
                url: $("#contact-form").attr('action'),
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,
                success:function(data)
                {
                    if(data.result)
                    {
                        toastr.success(data.message, "Success");
                        $('.form-contact form').get(0).reset();//Check this
                    }
                    else
                    {
                        toastr.error(data.message, "Error");
                    }
                },
                error:function(data)
                {
                    toastr.error(data.message, "Error");
                }
            })
        ).then(function(){
            $("#btnContactUs").button('reset');
            $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
        });