jquery - 在 Jquery 的帮助下检查 HTML 5 验证

Question

我有一个具有 HTML 5 验证的表单，我想当且仅当 HTML 5 验证没有错误消息时显示加载程序。那么我该怎么做呢？我已经尝试了很多，通过提交按钮的 onclick 事件，也尝试通过表单提交事件，但没有任何效果。

这是表格

<form action="<?php echo base_url();?>index.php/contact/index" method="post" id="contact_form">
  <div class="form-group">
    <label style="color: #333;">Name</label>
    <input type="text" class="form-control" id="input_name" name="input_name" placeholder="Enter Your Name" required="required">
  </div>
  <div class="form-group">
    <label style="color: #333;">Email</label>
    <input type="email" class="form-control" id="input_email" name="input_email" placeholder="Enter your Email" required="required">
  </div>
  <div class="form-group">
    <label style="color: #333;">Subject</label>
    <select class="form-control" id="input_subject" name="input_subject">
        <option value="FAQ"> FAQ's</option>
        <option value="Feedback & Suggestion"> Feedbacks And Suggestions</option>
    </select>

  </div>
  <div class="form-group">
    <label style="color: #333;">Message</label>
    <textarea class="form-control" id="input_message" name="input_message" placeholder="Enter your Message" required="required"></textarea>
  </div>

  <center>
  <button type="submit" class="btn btn-primary btn-lg btn-block" id="contact_submit">Submit</button><img src="<?php echo base_url();?>assets/img/load.gif" height="50" width="50" style="display: none;" id="loader"/>
  </center><br />
</form>

这是我的加载器 javascript 代码

<script type="text/javascript">
  jQuery(document).ready(function() {

    $(document).on('click', '#contact_submit', function(){
    $('#loader').show();
  });
</script>

Answer 1

这是我用于类似操作的代码，基本上检查表单提交而不是提交按钮单击，并提供对表单验证的访问。

$('form').submit(function (e) {
    e.target.checkValidity();
    $('#loader').show();
});