问如何在存在验证错误时使用Jquery Validator避免或禁用表单提交
EN

Stack Overflow用户

提问于 2016-09-06 20:06:17

回答 3查看 91关注 0票数 1

实际上，我在使用JQUERY Validator进行表单验证时遇到了问题。即使表单在字段中有验证错误，也会提交表单。我不确定当字段中有验证错误时，我们如何禁用或不允许提交表单？我相信bootstrap验证器会在出现验证错误时禁用该按钮。虽然在我的例子中我使用的是JQUERY验证器，但是表单正在被提交，并调用了一个ajax调用，我在提交时调用了这个调用。请帮帮我！

form id="myform" class="form-horizontal" role="form" action="processAccount" method="post">
                    <h2><b style="color:#1E90FF;">Account</b></h2>
                    <div class="form-group">
                        <label for="Account Number" class="col-sm-3 control-label">Account Number</label>
                        <div class="col-sm-9">
                            <input type="text" id="accountNumber"  name="accountNumber" placeholder="Account Number" class="form-control" autofocus required />
                        <!--<span class="help-block">Last Name, First Name, eg.: Smith, Harry</span>-->                    
                    </div>
                    </div>

                    <div class="form-group">
                        <label for="Company Number" class="col-sm-3 control-label">Company Number</label>
                        <div class="col-sm-9">
                            <input type="number" min="1" id="companyNumber" name="companyNumber" placeholder="Company Number" class="form-control" value=${companyNumber} required />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
    <!--                         <button type="submit" class="btn btn-info btn-block" onclick="doAjaxPost()">Search</button>
     -->                        
                            <input type="button" style=" font-size: 18px;font-weight: bold;  font-family: cursive;" id="processbutton" class="btn btn-info btn-block" value="Load" onclick="doAjaxPost()">

                                <div id="info" style="color: green; font-weight: bold;" font-size:380%;></div>      

    <%--                        <p ><strong>${message}</strong></p>
     --%>                                    
                        </div>
                      </div>

                </form> <!-- /form -->

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

    $('#myform').validate({ // initialize the plugin

        rules: {
            accountNumber: {
                required: true,
                minlength: 7,
                maxlength: 7,
                digits: true

            },
            companyNumber: {
                required: true,
                digits: true

            },
            submitHandler: function (form) {
                console.log("Submitted!");
                form.submit();
            }
        }
    });

});

    </script>



<script type="text/javascript">
function doAjaxPost() {  
      // get the form values  
      var accountNumber = $('#accountNumber').val();
      var companyNumber = $('#companyNumber').val();
      var token = $("meta[name='_csrf']").attr("content");
      var header = $("meta[name='_csrf_header']").attr("content");
      var num = 1;
      $.ajax({  
        type: "POST",  
        url: "./processAccount",  
       cache: false, 
        data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber,  
       beforeSend: function(xhr) {
           xhr.setRequestHeader(header, token);
       },
        success: function(response){  
          // we have the response  
          $('#info').html(response);
          $('#accountNumber').val('');
          if(companyNumber!=1)
              {
          $('#companyNumber').val(num);
              }
        },  
        error: function(e){  
          alert('Error While Request: ' + e);  
        }  
      });  
    }  
</script>

在JQUERY验证块下添加了SubmitHandler方法，但是得到一个错误，因为请求方法'POST‘不受支持

submitHandler: function (form) {
                console.log("Submitted!");
                // get the form values  
              var accountNumber = $('#accountNumber').val();
              var companyNumber = $('#companyNumber').val();
              var token = $("meta[name='_csrf']").attr("content");
              var header = $("meta[name='_csrf_header']").attr("content");
              var num = 1;
              $.ajax({  
                type: "POST",  
                url: "./processAccount",  
              dataType: "json",
              contentType: 'application/json',
               cache: false, 
                data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber,  
               beforeSend: function(xhr) {
                     xhr.setRequestHeader(header, token);
                 },
                success: function(response){  
                  // we have the response  
                  $('#info').html(response);
                  $('#accountNumber').val('');
                  if(companyNumber!=1)
                      {
                  $('#companyNumber').val(num);
                      }
                },  
                error: function(e){  
                  alert('Error While Request: ' + e);  
                }  
              }); 
              form.submit();
            }
          }
    });
});

jquery-ui

javascript

jquery

forms

validation

运维排障定位快人一步

一站式日志服务平台---日志服务 CLS，智能化配置、开箱即用，协助解决业务运维、服务监控、用户行为分析、日志审计等场景诉求。

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-09-06 20:21:52

将submit按钮更改为type="submit"并删除on click处理程序。

如果你想通过AJAX发送它，你仍然可以在submitHandler回调中这样做。

说明:通过将单击处理程序设置为doAjaxPost()，您可能会绕过验证，并且submitHandler代码永远不会执行。

此外，您还有另一个错误。submitHandler应该是rules的兄弟，而不是孩子！它不会以您使用的方式命名。像这样使用它：

$('#myform').validate({ // initialize the plugin
    submitHandler: function (form) {
         console.log("Submitted!");
         form.submit(); // default form submitting
    },
    rules: {
        accountNumber: {
            required: true,
            minlength: 7,
            maxlength: 7,
            digits: true
        },
        companyNumber: {
            required: true,
            digits: true
        }
    }
});

另请参阅API文档https://jqueryvalidation.org/documentation/中的

为了通过AJAX发送它，你应该能够调用你的doAjaxPost()而不是form.submit(); -在这个地方已经发生了验证。

EDIT:根据OP的提示--这里是如何用他的自定义AJAX调用编写的：

submitHandler: function (form) {
      console.log("Submitted!");
      doAjaxPost(); // custom AJAX call
}

票数 1

Stack Overflow用户

发布于 2016-09-06 20:23:32

我怀疑doAjaxPost()方法是在验证结果之外调用的。这个方法里面有什么？

你能识别出你使用的jquery验证插件(项目页面，文档页面...)吗？

票数 0

Stack Overflow用户

发布于 2016-09-06 20:28:48

你可以这样做，只需添加以下选项：

$("#myform").validate({
  success: function() {
    $("button[type='submit']").prop("disabled",false);//enable your submit if success
  },
  invalidHandler: function(){
   $("button[type='submit']").prop("disabled",true); // disable your submit if there is any errors
    return false; //Disable post
  }
});