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

Question

我在应用程序中使用Spring mvc并且它有一个提交表单。表单有例如 - firstName，lastName字段和提交按钮（type =“submit”）。 我想要实现的是当我点击提交按钮时，它应该对字段（firstName，lastName）执行验证，而不是提交按钮应该提交值。

我尝试了以下代码：

针对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调用和控制器中的提交代码，这里出错了。

Answer 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
  });
});