为什么我的表单提交并忽略验证？答案

【问题标题】：Why does my form submit and ignore validation?为什么我的表单提交并忽略验证？
【发布时间】：2016-04-30 10:09:52
【问题描述】：

我想弄清楚为什么jquery validation 不会阻止我的表单被提交？当按下提交按钮时，表单正确发布但似乎忽略了验证错误（此字段是必需的），即使输入字段留空。

表格

$(document).ready(function() {
  $("#message").hide();

  //Define your validation rules.
  $(function() {
    $("#myform").validate({

    });
    $("#submitButtonId").on("click", function(e) {
      var formdata = $("#myform").serialize();
      //Post form data
      $.post('php_includes/simple_insert.php', formdata, function(data) {
        //Process post response
        $("#message").html(data);
        $("#message").fadeIn(500);
        $("#message").fadeOut(500);
      });

      //Reset Form
      $('#myform')[0].reset();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

<form class="form-inline" action="" id="myform" method="post">

  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label" for="bill_cost"></label>
    <div class="col-md-8">
      <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>

    </div>
  </div>

  <!-- Button -->
  <div class="form-group">
    <label class="col-md-4 control-label" for="submit1"></label>
    <div class="col-md-4">
      <button type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
    </div>
  </div>
</form>

【问题讨论】：

“点击提交按钮”事件发生在之前“提交表单”事件，它是具有验证码的“提交表单”事件。因为您是在“单击提交按钮”事件中发送post 请求，所以在此之前它不会进行验证。

标签： javascript jquery forms validation

【解决方案1】：

试试这个，使用 submitHandler 为一个有效的表单做其他事情：

    $("#myform").validate({
        submitHandler : function() {
            var formdata = $("#myform").serialize();
           //Post form data
           $.post('php_includes/simple_insert.php', formdata, function(data){
             //Process post response
             $("#message").html(data);
             $("#message").fadeIn(500); 
             $("#message").fadeOut(500); 
           });

          //Reset Form
           $('#myform')[0].reset(); 

           }
        });

【讨论】：

该死的，你刚刚打败了我
这并不能解释为什么 OP 的代码不起作用 ;)
因为即使存在验证，他也没有检查表单是否有效以发送 ajax - 因为用户单击按钮 ajax 只会执行，所以使用 submitHandler 我们可以检查是否有效然后只发送ajax 请求
效果很好。谢谢。

【解决方案2】：

删除账单成本文本框中的必填标签。然后检查验证是否被忽略

【讨论】：