Uncaught TypeError when clicking on navigation buttons

Uncaught TypeError when clicking on navigation buttons

Hi, 

I have the code below that is relative to a page that has a multi-step form. For the navigation between the steps I'm using bootstrap and jquery. The issue is that when some step navigation button is clicked it appears on the console the error:

Uncaught TypeError: Cannot read property 'nodeName' of undefined in the  tabs.js file in the line 155 that is:
  1.       if (container.nodeName === 'UL') { // line 155
Do you know where can be the issue? 

HTML:

  1. <div class="bg-light-gray2">
  2.   <div class="container nopadding py-4">
  3.     <div class="row justify-content-center align-items-center">
  4.       <div class="col-12">
  5.         <h1 class="h5 text-center text-heading-blue font-weight-bold">Page Title</h1>
  6.       </div>
  7.     </div>

  9.     <div class="row mt-3 d-flex justify-content-center">
  10.       <div class="col-12">
  11.         <div class="registration_form">
  12.           <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
  13.             <li class="">
  14.               <a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
  15.                 Step 1<br><small class="d-none d-md-inline-block">General Info</small></a>
  16.             </li>
  17.             <li class="disabled">
  18.               <a class="nav-link" href="#step2" data-toggle="tab" role="tab">
  19.                 Step 2<br><small class="d-none d-md-inline-block">Conference Creator Info</small></a>
  20.             </li>
  21.             <li class="disabled">
  22.               <a class="nav-link" href="#step3" data-toggle="tab" role="tab">
  23.                 Step 3<br><small class="d-none d-md-inline-block">Registration Types</small></a>
  24.             </li>
  25.           </ul>

  27.           <form method="post" name="test" class="clearfix" action="/conference/store">
  28.             <div class="tab-content registration_body bg-white" id="myTabContent">
  29.               <div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
  30.                
  31.                 <div class="form-group">
  32.                   <label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name</label>
  33.                   <input type="text" required class="form-control" name="conference_name" id="conference_name">
  34.                 </div>

  36.                 <div class="form-row">
  37.                   <div class="form-group col-lg-6">
  38.                     <label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Categories</label>
  39.                     <select id="tag_list"  multiple class="form-control" name="conference_categories" id="conference_categories">
  40.                       <option>category1</option>
  41.                       <option>category2</option>
  42.                     </select>
  43.                   </div>
  44.                 </div>

  46.                 <div class="form-group">
  47.                   <label class="text-heading h6 font-weight-semi-bold">Address</label>
  48.                   <div class="form-row">
  49.                     <div class="col">
  50.                       <input type="text" required name="conference_city" class="form-control">
  51.                     </div>
  52.                     <div class="col">
  53.                       <input type="text" required name="conference_zip_code" class="form-control">
  54.                     </div>
  55.                   </div>
  56.                 </div>

  58.                 <div class="form-row">
  59.                   <div class="form-group col">
  60.                     <input type="text" required name="conference_address" class="form-control">
  61.                   </div>
  62.                 </div>
  63.                 <div class="form-row">
  64.                   <div class="form-group col">
  65.                     <input type="text" required name="conference_place" class="form-control">
  66.                   </div>
  67.                 </div>

  69.                 <div class="form-row">
  70.                   <div class="form-group col col-lg-6">
  71.                     <label for="conference_image" class="text-heading h6 font-weight-semi-bold">Conference Image</label>
  72.                     <label class="conference_image">
  73.                       <input type="file" required id="conference_image" name="conference_image" class="custom-file-input">
  74.                       <span class="custom-file-control"></span>
  75.                     </label>
  76.                   </div>
  77.                 </div>


  80.                 <div class="form-group">
  81.                   <label for="textarea" class="text-heading h6 font-weight-semi-bold">Conference Description</label>
  82.                   <textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
  83.                 </div>

  85.                 <div class="float-right">
  86.                   <button type="button" href="#step2" data-toggle="tab" role="tab"
  87.                           class="btn mr-2 btn-primary btn next-step">
  88.                     Go To Step 2
  89.                   </button>
  90.                 </div>

  92.               </div>

  94.               <div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">

  96.                 <div class="form-row">
  97.                   <div class="form-group col-md-6">
  98.                     <label for="conference_organizer_name"  class="text-heading h6 font-weight-semi-bold">Name</label>
  99.                     <input type="email" class="form-control" required name="conference_organizer_name" id="conference_organizer_name">
  100.                   </div>
  101.                   <div class="form-group col-md-6">
  102.                     <label for="conference_organizer_email"  class="text-heading h6 font-weight-semi-bold">Email</label>
  103.                     <input type="password" required name="conference_organizer_email" class="form-control" id="conference_organizer_email" placeholder="Email">
  104.                   </div>
  105.                 </div>

  107.                 <div class="form-group">
  108.                   <label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
  109.                   <textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
  110.                 </div>

  112.                 <button type="button" href="#step1" data-toggle="tab" role="tab"
  113.                         class="btn mr-2 btn-outline-primary btn prev-step">
  114.                   Back to Step 1
  115.                 </button>
  116.                 <button type="button" href="#step2" data-toggle="tab" role="tab"
  117.                         class="btn mr-2 btn-primary btn next-step">
  118.                   Go To Step 2
  119.                 </button>
  120.               </div>
  121.               <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
  122.                 <div class="form-group">
  123.                   <label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
  124.                   <input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
  125.                 </div>

  127.                 <div class="form-group">
  128.                   <label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
  129.                   <input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
  130.                 </div>

  132.                 <div class="form-row">
  133.                   <div class="form-group col-md-6">
  134.                     <label for="registration_type_capacity" class="text-heading h6 font-weight-semi-bold">Capacity</label>
  135.                     <input type="text" required class="form-control" name="registration_type_capacity" id="registration_type_capacity">
  136.                   </div>
  137.                   <div class="form-group col-md-6">
  138.                     <label for="registration_type_value" class="text-heading h6 font-weight-semi-bold">Value</label>
  139.                     <input type="text" required class="form-control" name="registration_type_value" id="registration_type_value">
  140.                   </div>
  141.                 </div>

  143.                 <div class="form-row">
  144.                   <div class="form-group col-md-6">
  145.                     <label for="registration_type_minimum" class="text-heading h6 font-weight-semi-bold">Minimum Registrations per request</label>
  146.                     <input type="text" name="registration_type_minimum" class="form-control" id="registration_type_minimum" value="1">
  147.                   </div>
  148.                   <div class="form-group col-md-6">
  149.                     <label for="registration_type_maximum" class="text-heading h6 font-weight-semi-bold">Maximum Registrations per request</label>
  150.                     <input type="text" class="form-control" name="registration_type_maximum" id="registration_type_maximum">
  151.                   </div>
  152.                 </div>

  154.                 <div class="form-row">
  155.                   <div class="form-group col-md-6">
  156.                     <label for="registration_type_start" class="text-heading h6 font-weight-semi-bold">Start</label>
  157.                     <div class="input-group date" data-provide="datepicker">
  158.                       <input type='text' name="registration_type_start" class="form-control" id="registration_type_start" placeholder="MM/DD/YYY" />
  159.                     </div>
  160.                   </div>
  161.                   <div class="form-group col-md-6">
  162.                     <label for="registration_type_end" class="text-heading h6 font-weight-semi-bold">End</label>
  163.                     <div class="input-group date" data-provide="datepicker">
  164.                       <input type='text' class="form-control" name="registration_type_end" id='registration_type_end' placeholder="MM/DD/YYY" />
  165.                     </div>
  166.                   </div>
  167.                 </div>
  168.                 <button type="button" href="#step2" data-toggle="tab" role="tab"
  169.                         class="btn mr-2 btn-outline-primary btn prev-step">
  170.                   Go Back To Step 2
  171.                 </button>
  172.                 <button type="submit"
  173.                         class="btn mr-2 btn-primary btn">
  174.                   Store
  175.                 </button>

  177.               </div>
  178.             </div>
  179.           </form>
  180.         </div>
  181.       </div>
  182.     </div>
  183.   </div>
  184. </div>

JS:

  2. $(function(){
  3.  // select2
  4.   $('#tag_list').select2({
  5.     placeholder: '',
  6.     dropdownAutoWidth: 'true',
  7.     width: '100%'
  8.   });
  9.   
  10.   // navigation buttons
  11.   
  12.   $('a.nav-link').on('show.bs.tab', function (e) {
  13.     var $target = $(e.target);
  14.     if ($target.parent().hasClass('disabled')) {
  15.       e.preventDefault();
  16.     }
  17.   });

  19.   $(".next-step").click(function (e) {
  20.     var $active = $('.nav-pills li a.active');
  21.     $active.parent().next().removeClass('disabled');
  22.     nextTab($active);
  23.   });

  25.   $(".prev-step").click(function (e) {
  26.     var $active = $('.nav-pills li a.active');
  27.     prevTab($active);
  28.   });

  30.   function nextTab(elem) {
  31.     $(elem).parent().next().find('a.nav-link').click();
  32.   }
  33.   function prevTab(elem) {
  34.     $(elem).parent().prev().find('a.nav-link').click();
  35.   }
  36. });