Jquery step plugin get to next step from ajax success

Question

I using jquery step plugin with form validater to verify whether input is inserted (not empty at required column) and validate by ajax response (check value from backend).

Purpose: click next and go step 1 wizard (from step 0) after ajax response (by return true)

But I stuck at even ajax return true, but still cannot proceed next step. Even I try "gotvalue" in input also cannot proceed next.

Here is the jquery code:

var form = $("#redeem-form").show();

$.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
});

form.steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    labels: {
        finish: "Confirm and Redeem"
    },
    onStepChanging: function (event, currentIndex, newIndex)
    {   
        var x = $("#input_access_code").val();
        console.log(x);
        if (currentIndex === 0)
        {   
            $.ajax({
                type: "GET",
                url: "{{route('checkRedeem')}}",
                data: {'access_code':$("#input_access_code").val()},
                success: function(data)
                {
                    let datas = data;
                    console.log(datas);
                    if(datas == 'no'){
                        return false;
                    }
                    else{
                        return true;
                    }
                }
            });

        }
    },
    onStepChanged: function (event, currentIndex, priorIndex){...},
    onFinishing: function (event, currentIndex){...},
    onFinished: function (event, currentIndex){...}
});

Here is controller in laravel:

public function checkRedeemCode(Request $request)
{
    $redeemCode = $request->access_code;

    if($redeemCode == "gotvalue"){
        return $redeemCode;
    }
    else{
        return 'no';
    }
}

Answer 1

The reason lies in your ajax function is asynchronous. Please add async: false in ajax call