验证包含 Ajax jquery 的表单函数

Posted 2023-05-09

【中文标题】验证包含 Ajax jquery 的表单函数

【英文标题】：Validate Form function containing 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>

【问题讨论】：

你能告诉我们你在哪里引用这个函数吗？

这是我的表单标签。

【参考方案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 ;
;