验证包含 Ajax jquery 的表单函数答案

【问题标题】：Validate Form function containing Ajax jquery验证包含 Ajax jquery 的表单函数
【发布时间】：2019-04-13 21:07:22
【问题描述】：

我终于让我的 Ajax 函数正常工作，但现在我有了另一个程序。我的验证表单函数似乎在 Ajax 完成之前返回。如果打开我的控制台日志，console.log(result);就在我的返回结果之前；在我的 console.log(resp) 之前打印出来；在成功函数中找到。所以我的验证表单继续返回 false，因此我的表单没有提交。但我知道我的成功正在取得成功，因为我看到它在控制台日志中转储。为什么会这样？我需要用准备好的文档来包装我的函数吗？

下面是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function validateForm(){
  var email = document.forms["signupform"]["email"].value;
  var result = false;
  if (email != ""){
    $.ajax({           
      type: "POST",  
      url: "/CheckEmail2.php",  
      data: { "User_Email": email },
      dataType: "json",
      success: function(resp){
        console.log(resp);
        if(resp.reply == "Not Found"){
          result = true;
          return result;
        }
        else
        {
        result = false;
        return result;
        }

      },
      //error: function(data, status){
        //console.log(data, status);
        //alert("error");
      //}
    }); //end Ajax
  }
  console.log(result);
  return result;
};
</script>

【问题讨论】：

你能告诉我们你在哪里引用这个函数吗？
这是我的表单标签。

标签： jquery ajax forms validation onsubmit

【解决方案1】：

基本问题是 ajax 是异步的，所以在 ajax 完成之前很久就会返回到函数。

可以在success里面使用form元素原生的submit，使用flag绕过ajax

var isValid = false
function validateForm(){
  var form = document.forms["signupform"]
  var email = form["email"].value;

  if (email != "" && !isValid){
    $.ajax({           
      type: "POST",  
      url: "/CheckEmail2.php",  
      data: { "User_Email": email },
      dataType: "json",
      success: function(resp){
        isValid = true
        // submit the form
        form.submit()
      }
    }); //end Ajax
  }

  return isValid ;
};

【讨论】：