javascript - 我可以在提交表单之前等待 $.get() 调用吗？

Question

我有一个注册表单，提示输入名字、姓氏、用户名、密码和电子邮件地址。我使用两个单独的 $.get() 方法来检查用户名和电子邮件地址是否不存在。

这是我的功能:

 function validateSignUp() {
        var firstName = $("#first-name").val();
        var lastName = $("#last-name").val();
        var username = $("#username").val();
        var password = $("#pass").val();
        var email = $("#email").val();
        var passwordVerifier = $("#retype-pass").val();
        var emailVerifier = $("#retype-email").val();

        errorMessage = "";
        var isUsernameValid = validateUsername(username);

        var isError = false;

        // validate first name field
        if (firstName == "" || lastName == "") {
            isError = true;
            $("#error-message").html("All fields are required");
        }

        // validate password
        if (validatePassword(password) == false) {
            isError = true;
            $("#check-password").html("Password is invalid");
        }
        else {
            $("#check-password").html("");
        }

        // validate password verifier
        if (passwordVerifier == password) {
            if (validatePassword(passwordVerifier) == false) {
                isError = true;
                $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters");
            }
            else {
                if (password != passwordVerifier) {
                    isError = true;
                    $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters ");
                }
                else {
                    $("#recheck-password").html("");
                }
            }
        }
        else {
            isError = true;
            $("#recheck-password").html("Passwords didn't match");
        }

        // validate username field
        if (isUsernameValid == false) {
            isError = true;
            $("#check-username").html("Alphanumeric characters only");
        } // if
        else if (isUsernameValid == true) {
            $.get("/account/checkavailabilitybyusername", { username: username },
                    function(data) {
                        if (data == "Not Existing") {
                            $("#check-username").html("");
                        }
                        else if (data == username) {
                            isError = true;
                            $("#check-username").html("Sorry, this username is already registered");
                        }
                    }
                    );
        } // else
        // validate e-mail address field

        if (validateEmail(email) == false) {
            isError = true;
            $("#check-email").html("Sorry, the e-mail you typed is invalid");
        } // if
        else if (validateEmail(email) == true) {
        $.get("/account/checkavailabilitybyemail", { email: email },
                    function(data) {
        if (data == "Not Existing") {
                            $("#check-email").html("");
                        }
                        else if (data == email) {
                        isError = true;
                            $("#check-email").html("Sorry, this e-mail is already registered");
                        }
                    });
                }
                if (isError == true) {
                    return false;
                }
        return true;
   }

当其他字段为空且用户名和/或电子邮件地址存在时，不会提交表单。并且get方法的回调函数也会被调用。但是，当我要提交没有空字段的表单时，它会自动提交，而不会通过 $.get() 检查用户名和/或电子邮件。我的功能有什么问题或者我还没有发现什么吗？谢谢。

Answer 1

您需要使用完整的 ajax() 调用并将 async 属性设置为 false。这使您的请求同步，即它强制浏览器等待，直到执行其他操作。试试这个:

 $.ajax({
     url: "/account/checkavailabilitybyemail",
     data: { email: email },
     async: false,
     success: function(data) {
         if (data == "Not Existing") {
             $("#check-email").html("");
         } else if (data == email) {
             isError = true;
             $("#check-email").html("Sorry, this e-mail is already registered");
         }
     })
 });

 if (isError == true) {
      return false;
 }