jquery ajax asynchronous call depreacted

Question

I am using jquery 1.11.2 and i am trying to make a ajax async call because i am validating a form.

Here is my code

    <form name="form1" id="form1" method="post" action="/payment/payment.php" 
onsubmit="return validateForm();">
    </form>

function validateForm()
{
        data = $('form#form1').serialize(); 

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/validate.php",
            data: data,
            async: false,
            ,success: function (j) {                
                if(j.error)
                { 
                    form_valid=false;
                }

                if(j.success)
                {
                    form_valid=true;
                }       

            }//success                      
        });//ajax


    if(!form_valid){
        return false;
    }
    return true;

}

and because async : false is deprecated the function first return and the gets the ajax response.

The jquery says : "As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success()."

but i don know how to do this, have search all over but i have not find any solution

How can i make it async or write any other approach that will actually solve my problem

Thanks

Answer 1

Your best option is to use an async request and prevent default behaviour of submiting FORM. Then, once the async request is done, submit the FORM manually.

HTML:

<form name="form1" id="form1" method="post" action="/payment/payment.php">...</form>

js/jQuery:

$('#form1').on('submit', function(e){ // could have been to be wrapped in document ready handler or delegate event
    e.preventDefault(); // prevent FORM to be submitted
    $(this).find(':submit').prop('disabled', true);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "/validate.php",
        data: $(this).serialize(),
        context: this, // set context relative to the FORM
        success: function (j) {
            if (j.success) {
                this.submit(); // submit the FORM
            }
        }                      
    }).always(function(){$(this).find(':submit').prop('disabled', false);}); 
});

Answer 2

The solution would be to disable your form until you get a response from your ajax request. Then take action.

ie.

function validateForm()
{
        data = $('form#form1').serialize(); 
        disableForm(true)

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/validate.php",
            data: data,
            async: false,
            ,success: function (j) {                
                if(j.error)
                { 
                    form_valid=false;
                    //Do something that you would do if the form was not valid
                }

                if(j.success)
                {
                    form_valid=true;
                    //Do something that you could do if the form is valid
                }       

                disableForm(false)
            }//success,
           failure: function(e){
                //Show an error
                disableForm(false)
           }
        });//ajax    
}

function disableForm(bool){
    //Put some code here to disable the form.
    //You could use an overlay, or just simply disable the form controls
}