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

I am trying to figure out why jquery validation does not stop my form from being submitted? When the submit button is pressed the form posts correctly but seems to ignore the validation error (This field is required) even if the input field is left blank.

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

The form

$(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>

2 个解决方案

#1

Try this, use submitHandler to do other things for a valid form:

试试这个,使用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(); 

           }
        });

#2

-1

Remove a Required tag in bill cost text box.then you check the validation is ignored

在帐单成本文本框中删除必需的标记。然后检查验证是否被忽略

#1