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

我想弄清楚为什么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>

来源

2016-04-30 JulianJ

“点击提交按钮”事件发生在*“提交表单”事件之前，并且它是具有验证代码的“提交表单”事件。由于您在“点击提交按钮”事件中发送了“发布”请求，因此在此之前尚未进行验证。 –

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

      } 
     });

来源

2016-04-30 10:14:30

该死的，你只是打我吧 –

这并不能解释为什么OP的代码不工作，虽然;） –

，因为即使有验证，他还没有检查表单是否有效发送阿贾克斯 - 作为用户点击按钮ajax只会执行，所以使用submitHandler我们可以检查，如果有效，那么只发送ajax请求 –

-1

票据成本的文字删除要求标签box.then你检查验证被忽略

来源

2016-04-30 10:21:59

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

回答

相关问题