jQuery Form Validation is not working on bootstrap modal

Question

I am using jQuery validation of this I am writing form validation on bootstrap modal but it's not working properly whenever I hit the submit button its getting submitted without showing the form validation errors. My code is below:

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

My bootstrap modal with form - 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>

I have stored this modal code in separate file and I have included that file in the list page & also included the jQuery validation script in the list page itself & I am using the add button on the list page to open the add modal form. Like below:

list.php

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

The same code is working fine in some other place. What's wrong with my code? why is, in this case, it's not working properly Any help.

Answer 1

Problem is that "DataTables currently doesn't support colspan or rowspan in the <tbody> tag"

I got to know that the problem is an error "jquery.dataTables.min.js:24 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined" which is because with the jQuery data tables on the list page where I have included the bootstrap modal file. So I have fixed the issue by the below

Instead of using complex header example you can add hidden column to the end of tr, it's hacky but simpler and shorter in my opinion:

<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>  

I got the answer from 'renkse' here

Answer 2

Previously I faced the same problem when I tried to use JQuery Validation. The form didn't get validated and submitted manually without showing any errors. Then when I open the developer console while submitting the form, some error printed while I click the submit button and at the same time the page got refreshed due to form submission. So, I realized that there is some error in my script, but I can't able to read it due to page load on form submit. So I stopped the form submit manually by adding the attribute

onsubmit="event.preventDefault()"

Then the form submit stopped when I click submit button and it didn't reload the page. Now I can able to read the error shown in the developer console. Most of the errors I faced with trailing commas and extra braces only. So try below solution as it works for me.

As I see your code, there is an extra comma in rules, like below.

teacher_id: {
   required: true,
}

May be your form will be submitted as manually before showing JQuery Validation error in console. Please add the below code as an attribute and try to submit again.

onsubmit="event.preventDefault()"

Now it will stop your form submission, then if you see in the developer console, you will find the JQuery validation error.