在提交值之前验证表单字段（验证函数中包含 ajax 调用）答案

【问题标题】：Validate form fields (ajax call included in validation function) before submitting the values在提交值之前验证表单字段（验证函数中包含 ajax 调用）
【发布时间】：2014-01-22 17:20:43
【问题描述】：

我在应用程序中使用 Spring mvc，它有一个提交表单。该表单具有例如 - firstName、lastName 字段和一个提交按钮（type="submit"）。我想要实现的是当我单击提交按钮时，它应该对字段（名字，姓氏）执行验证，然后提交按钮应该提交值。

我尝试了以下代码：

home.jsp

    <form:form id="formDataBean" method="post" modelAttribute="formDataBean" action="submit" class="form" >

        <input id="firstName" name="firstName" value="${firstName}"/>
        <input id="lastName" name="lastName" value="${lastName}"/>
        <input id="submitButtonid" type="submit" value="Submit"/> 

    </form:form> 

<script>
$(document).ready(function(){

    $("#formDataBean").submit(function( event ) {

         // validation code below
         var firstName = $("#firstName").val();
         var lastName = $("#lastName").val();

         var infoToValidate = new Array();  
         infoToValidate.push(firstName);
         infoToValidate.push(lastName);

         // ajax call to controller to validate the values

         $.ajax({

              url : "validate",
              type : "GET",
              data : "infoToValidate=" + infoToValidate,  //Stringified Json Object

              success : function(data) {  

                     if(data == valid){
                     //i want to re invoke the submit button without any code
                     $("#formDataBean").submit(function( event ) {}
                     }

                      if(data == inValid){
                     //i want to prevent the submit button action to propagate further 
                     event.preventDefault();        
                     }
              },
              error : function() {
                    alert("fail");
              }
             });
    }
}
</script>

HomeController.java

    @RequestMapping(value = "/submit", method = RequestMethod.POST)
    public String submitInfo(FormDataBean formDataBean, Model model){

        // submission code 

        return "home";
    }

    @RequestMapping(value = "/validate" , method = RequestMethod.GET)
    public String validateResult(@RequestParam String[] infoToValidate) {

        // validation code
            if valid{
             return "valid";
            } else{
             return "inValid";
            }
    }

问题来了： 如果我不会在验证函数中调用 ajax，那么代码就可以正常工作（第一次验证会发生，如果值有效它将调用控制器提交方法提交结果）但是如果我在验证中使用 ajax 调用（这是我的情况所必需的），如上所示，那么两个事件将同时启动这两个事件都意味着：控制器中的ajax调用和提交代码，这里出错了。

【问题讨论】：

您的字符串化 json 不会仅仅因为您的评论这么说而发生。在浪费电话之前还要测试空白的值。您还需要使用 preventDefault 来阻止表单提交
@mplungjan 嗨，感谢您的评论，是的，我在将其传递给 ajax 之前检查空白或空，如果它的空白或空比我调用 event.preventDefault()，问题是两者控制器 validateResult 方法的控制器提交方法和 ajax 调用同时被调用。
当然需要在ajax调用之前调用event.preventDefault
是的，我当然会调用 event.preventDefault() 但前提是存在空白或空值，但如果 firstName 和 lastName 无效怎么办？它应该调用 ajax 来调用控制器的 validate() 方法来进一步验证其他逻辑的 firstName 和 lastName。我说的对吗？
除非您在提交事件中调用 preventDefault，否则您无法执行 AJAX，因为在您尝试 ajax 时将提交表单

标签： java jquery ajax spring-mvc

【解决方案1】：

试试这个。不建议使用async false，但是如果你坚持在提交之前进行服务器端验证，这是这里的解决方案。

更好的解决方案是提交表单，如果在服务器上发现更多错误，则返回错误

$(function(){
  $("#formDataBean").submit(function(event) {
    // validation code below
    var firstName = $("#firstName").val();
    var lastName = $("#lastName").val();
    if ($.trim(firstName+lastName) ==="") {
      alert("Please enter first name and last name");
      $("#firstName").focus();
      return false;
    }
    var vals = { "firstName":firstName,"lastName":lastName};
    // ajax call to controller to validate the values
    $.ajax({
      url  : "validate", 
      async: false,
      type : "GET",
      data : JSON.stringify(vals);
      success : function(data) {  
        if (data == "inValid") {
          alert("Names are invalid");
          return false; // cancel submit        
        },
      error : function() {
        alert("Error occurred");
        return false; // cancel submit        
      }
    });
    return true; // allow submission
  });
});

【讨论】：