Проверка формы jQuery не работает на модале начальной загрузки

Question

Я использую проверку jQuery this Я пишу проверку формы на моде начальной загрузки, но она не работает должным образом, когда я нажимаю кнопку отправки, она отправляется без отображения ошибок проверки формы. Мой код ниже:

$(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();
      }
    });
  });

Мой мод загрузки с формой - 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

Проблема в том, что "DataTables в настоящее время не поддерживает colspan или rowspan в теге <tbody>"

. Мне стало известно, что проблема заключается в ошибке "jquery.dataTables. min.js: 24 Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' undefined ", что связано с таблицами данных jQuery на странице списка, где я включил модальный файл начальной загрузки. Поэтому я исправил проблему следующим образом:

Вместо того, чтобы использовать пример сложного заголовка, вы можете добавить скрытый столбец в конец tr, это, на мой взгляд, смешно, но проще и короче:

<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' здесь

Answer 2

Раньше я сталкивался с той же проблемой, когда пытался использовать JQuery Validation. Форма не была проверена и отправлена ​​вручную без каких-либо ошибок. Затем, когда я открываю консоль разработчика при отправке формы, при нажатии кнопки «Отправить» выдается сообщение об ошибке, и в то же время страница обновляется из-за отправки формы. Итак, я понял, что в моем скрипте есть какая-то ошибка, но я не могу прочитать ее из-за загрузки страницы при отправке формы. Поэтому я остановил отправку формы вручную, добавив атрибут

onsubmit="event.preventDefault()"

Затем отправка формы остановилась, когда я нажал кнопку отправки, и она не перезагрузила страницу. Теперь я могу прочитать ошибку, отображаемую в консоли разработчика. Большинство ошибок я встречал только с запятыми и дополнительными скобками. Поэтому попробуйте следующее решение, так как оно работает для меня.

Когда я вижу ваш код, в правилах есть лишняя запятая, как показано ниже.

teacher_id: {
   required: true,
}

Возможно, ваша форма будет отправлена ​​каквручную перед отображением ошибки проверки JQuery в консоли. Пожалуйста, добавьте приведенный ниже код в качестве атрибута и повторите попытку.

onsubmit="event.preventDefault()"

Теперь это остановит отправку формы, а затем, если вы увидите в консоли разработчика, вы обнаружите ошибку проверки JQuery.