Код Ajax больше не работает, когда введена другая функция ajax

Question

Я пытаюсь запустить приведенный ниже код. Когда я запускаю код, у меня работают 2 функции проверки. Когда я запускаю его без функции validateUsername (), он работает отлично. Но когда я включаю в код всю функцию и включаю оператор if, файл больше не запускается, и он просто игнорирует все вызовы ajax.

$(document).ready(function() {

    $("#register-btn").on("click", function(e){
        console.log('Reg Starts!');
        e.preventDefault();
        if(validatePassword()){
            console.log('Password Validated!');
            if(validateUsername()) {
                console.log('Username Validated!');
                let data = $('#reg-form').serialize();
                let url = $('#reg-form').attr("action");
                
                $.post(url, data, (result) => {
                    $("#reg-username").val();
                    $("#reg-pw").val();
                    $("#reg-pw-cfm").val();

                    sessionStorage.setItem("restaurantID", 1);
                    sessionStorage.setItem("userID", 1);
                },'json'
                );
            }
        }
        $("#reg-username").val("");
        $("#reg-pw").val("");
        $("#reg-pw-cfm").val("");
    });
});

function validatePassword(){
    if($("#reg-pw").val().match(/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,20}$/)) {
        if($("#reg-pw").val() == ""){
            alert("Please enter password!!");
            return false;
        }
        if($("#reg-pw").val() != $("#reg-pw-cfm").val()) {
            alert("Passwords don't match!!");
            return false;
        } else {
            return true;
        }
    } else {
        alert("Please make sure password is between 6 to 20 characters and includes 1 numeric digit and a special character (!@#$%^&*)")
    }
}

function validateUsername() {
    $.ajax({
        url: 'validate_username',
        data: {
          'username':  $("#reg-username").val();
        },
        dataType: 'json',
        success: function (data) {
            if (data.is_taken) {
                alert("A user with this username already exists!");
                return false;
            }
            return true;
        }
    });   
}

Answer 1

$. ajax запускается асинхронно, а if(validateUsername()) всегда будет ложным, поэтому вам нужно использовать обещание вместо обратного вызова.

Дополнительная информация о обещаниях в javascript developer.mozilla .org

Как исправить:

Перепишите функцию проверки

function validateUsername() {
    return $.ajax({
       url: 'validate_username',
       data: {
          'username':  $("#reg-username").val();
       },
       dataType: 'json'
    });
}

И в вашей основной функции

validateUsername().then(function(data){
  if (data.is_taken) {
       alert("A user with this username already exists!");
       return;
  }
  console.log('Username Validated!');
  let data = $('#reg-form').serialize();
  let url = $('#reg-form').attr("action");
  /*...next code*/
})