jQuery 表单验证不适用于 bootstrap 模态

Question

我正在使用 jQuery 验证 this 我正在 bootstrap 模态上编写表单验证，但每当我点击提交按钮时它都无法正常工作，它会在不显示表单验证错误的情况下提交。我的代码如下：

$(document).ready(function () {

    $('#add_section_form').validate({
      rules: {
        section: {
          required: true
        },
        category: {
          required: true
        },
        capacity: {
          required: true
        },
        class_of_section: {
          required: true
        },
        teacher_id: {
          required: true,
        }
      },
      messages: {
        section: {
          required: "The Section field is required"
        },
        category: {
          required: "The category field is required"
        },
        capacity: {
          required: "The capacity field is required"
        },
        class_of_section: {
          required: "The class field is required"
        },
        teacher_id: {
          required: "The teacher name field is required"
        }
      },
      submitHandler: function (form) { // for demo
        // alert('valid form submitted');
        // return false;
        form.submit();
      }
    });
  });

我的 bootstrap 模态与形式 - add-section-modal.php:

 <!-- Modal -->
<div id="addSectionModal" class="modal fade" role="dialog">
 <div class="modal-dialog modal-lg">

 <!-- Modal content-->
 <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; 
       </button>
      <h4 class="modal-title text-center">ADD SECTION</h4>
    </div>
    <form id="add_section_form" data-parsley-validate class="form-horizontal form-label-left" action="<?php echo base_url();?>sections/save" method="post" enctype="multipart/form-data" >
    <div class="modal-body">
      <div class="container">
        <div class="row">
         <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
           Section *
          <input type="text" id="section" name='section' class="form-control">
        </div>
        <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
         Category *
         <input type="text" id="category" name="category" class="form-control">
        </div>
        <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
         Capacity *
         <input type="text" id="capacity" name="capacity" class="form-control">
        </div>
        <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
         Class
         <select id="class_of_section" class="form-control" name="class_of_section">
          <option value="">Choose..</option>
          <option value="class1" >Class1</option>
          <option value="class2" >Class2</option>
         </select>
        </div>
        <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
         Teacher Name
          <select id="teacher_id" class="form-control" name="teacher_id">
             <option value="">Choose..</option>
             <option value="teacher1" >Teacher1</option>
             <option value="teacher2" >Teacher2</option>
          </select>
        </div>
        <div class='col-md-4 col-sm-12 col-xs-12 form-group'>
         Note
         <textarea class="form-control" name="notes"></textarea>
        </div>
       </div>
      </div>
     </div>
     <div class="modal-footer">
      <input type="submit" class="btn btn-success" value="Submit">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </form>
    </div>
    </div>
   </div>

我已将此模态代码存储在单独的文件中，并将该文件包含在列表页面中，还在列表页面本身中包含 jQuery 验证脚本，我正在使用列表中的添加按钮页面打开添加模式表单。如下所示：

list.php

-----------
  $this->load->view('add-section-modal.php');
-----------
<script>
-----------------
 My above jQuery Validation script goes here
------------------
</script>

相同的代码在其他地方运行良好。我的代码有什么问题？为什么在这种情况下，它无法正常工作任何帮助。

Answer 1

以前我在尝试使用 JQuery 验证时遇到过同样的问题。表单没有得到验证和手动提交，没有显示任何错误。然后，当我在提交表单时打开开发人员控制台时，在我单击提交按钮时打印了一些错误，同时页面由于表单提交而刷新。因此，我意识到我的脚本中存在一些错误，但由于表单提交时页面加载，我无法读取它。所以我通过添加属性

手动停止了表单提交

onsubmit="event.preventDefault()"

然后当我点击提交按钮时表单提交停止并且没有重新加载页面。现在我可以读取开发人员控制台中显示的错误。我遇到的大多数错误只是尾随逗号和额外的大括号。所以尝试下面的解决方案，因为它对我有用。

我看到你的代码，规则中有一个额外的逗号，如下所示。

teacher_id: {
   required: true,
}

可能是您的表单将在控制台中显示 JQuery 验证错误之前手动提交。请添加以下代码作为属性并尝试重新提交。

onsubmit="event.preventDefault()"

现在它将停止您的表单提交，然后如果您在开发人员控制台中看到，您会发现 JQuery 验证错误。

Answer 2

问题是 "DataTables currently doesn't support colspan or rowspan in the <tbody> tag"

我知道问题是一个错误 "jquery.dataTables.min.js:24 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined"，这是因为列表页面上的 jQuery 数据表包含了 bootstrap 模态文件。所以我已经通过下面

解决了这个问题

您可以将隐藏列添加到 tr 的末尾，而不是使用复杂的 header 示例，在我看来，它很笨拙，但更简单、更短：

<thead>
<tr>    
  <th>&nbsp;</th> <!-- column 1 -->
  <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
  <th colspan="2">&nbsp;</th> <!-- column 4&5 -->

  <!-- hidden column 6 for proper DataTable applying -->
  <th style="display: none"></th> 
</tr>
</thead>

<tbody>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>

  <!-- hidden column 6 for proper DataTable applying -->
  <td style="display: none"></td>
</tr>
</tbody>

我从'renkse'here

那里得到了答案

jQuery 表单验证不适用于 bootstrap 模态

jQuery Form Validation is not working on bootstrap modal

javascript

jquery

jquery-validate