Javascript not waiting for ajax with bootstrap-wizard.js

I have a bootstrap-wizard as follows:

<div class="wizard-card" data-cardname="credential">
            <h3>Credential</h3>
            <div class="wizard-input-section">
                <p>Username</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="Busername" name="Busername" placeholder="Username" required data-parsley-type="alphanum" data-validate="checkNameAvailable" data-msg="Alphanumeric allowed only" />
                    </div>
                </div>
                <p>Password</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="Bpassword" name="Bpassword" placeholder="Password" />
                    </div>
                </div>
                <p>Re-type Password</p>
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="Bpassowrd2" name="Bpassword2" placeholder="Retype Password"/>
                    </div>
                </div>
            </div>
        </div>

The input <input type="text" class="form-control" id="Busername" name="Busername" placeholder="Username" required data-parsley-type="alphanum" data-validate="checkNameAvailable" data-msg="Alphanumeric allowed only" /> calls the checkNameAvailable function to make validation.

checkNameAvailable function: Which makes an ajax call to check if the name is available or not.

function checkNameAvailable(el){
        if($("#"+$(el).attr('id')).parsley().isValid()){
            var data =  $(el).val();
            if($(el).attr('id') == "Busername"){
                var type = "B";
            }else{
                var type = "I";
            }
            $.ajax({
                  method: "POST",
                  url: "isUserAvailableCommon",
                  async: false,
                  data: {Busername: data, _token: $("#_token").val(), _type: type },
                    success: function(msg) {
                        var retValue = {};
                        if(msg == "OK"){
                            retValue.status = true;
                            console.log(retValue);
                            return retValue;
                        }else{
                            retValue.status = false;
                            console.log(retValue);
                            return retValue;
                        }
                    }

             });
    }
}

The problem is that the variable retValue is not returned to the bootstrap-wizard validation.

However if i try like this it works but not when implementing with ajax

function checkNameAvailable(el){
  var retValue = {};
  retValue.status = false;
  return retValue;
}

Any idea how to make it work with ajax? I have tried callbacks and methods described in Javascript function not waiting for AJAX responsebut it is still not working.