Question

原因是：

提交按钮位于</form>
我需要使用bootstrap作为required字段

但是，当我使用onClick提交表单时。它只是提交表单而不进行检查 - 即使它是空白的。

＆＃13;

$('#submit').on('click',function(){
        	$('#billing-form').submit();
      });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">
    
      <!-- NAME -->
      <div class="col-md-6">
    	<input class="form-control" type="text" name="name" required/>
      </div>
       .
       .
       .    
    </form>

    //coupon
    <input type="text" name="coupon" />
    <button type="button" id="submit">Buy now!</button>

＆＃13;

Answer 1

我已经得到了它。

$("#submit").on("click", function(){
    if($("#billing-form")[0].checkValidity()) {
      //do ajax submit
    }
    else {
        $("#billing-form")[0].reportValidity();
    }
});

Answer 2

您可以使用checkValidity方法。它将返回true / false，具体取决于表单是否有效

＆＃13;

$('#submit').on('click', function(e) {
  var x = document.getElementById('billing-form').checkValidity();
  if (x) {
    $('#billing-form').submit();
  } else {
    console.log('Not Valid')
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="clearfix" id="billing-form" method="post">

  <!-- NAME -->
  <div class="col-md-6">
    <input class="form-control" type="text" name="name" required/>
  </div>

</form>

<input type="text" name="coupon" />
<button type="button" id="submit">Buy now!</button>

＆＃13;

如何使用＆＃39; required＆＃39;提交引导程序表单？带onClick按钮的元素

2 个答案: