Validation in each step of the multi-step form

Validation in each step of the multi-step form

I´m creating a multi-step form using bootstrap and jquery with 4 steps. 

But I want that in each step validate the required fields, that is, the button to go to the next step should only work if the required fields are not empty.

But I´m not having success implementing this part of validating each step the required fields. Do you know how to do that?


Jquery:

  1.     $(function(){
  2.      
  3.       // navigation buttons
  4.       
  5.       $('a.nav-link').on('show.bs.tab', function (e) {
  6.         var $target = $(e.target);
  7.         if ($target.parent().hasClass('disabled')) {
  8.           e.preventDefault();
  9.         }
  10.       });
  11.     
  12.       $(".next-step").click(function (e) {
  13.         var $active = $('.nav-pills li a.active');
  14.         $active.parent().next().removeClass('disabled');
  15.         nextTab($active);
  16.       });
  17.     
  18.       $(".prev-step").click(function (e) {
  19.         var $active = $('.nav-pills li a.active');
  20.         prevTab($active);
  21.       });
  22.     
  23.       function nextTab(elem) {
  24.         $(elem).parent().next().find('a.nav-link').click();
  25.       }
  26.       function prevTab(elem) {
  27.         $(elem).parent().prev().find('a.nav-link').click();
  28.       }
  29.     });


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>
  8.     
  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>
  26.     
  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>
  35.     
  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>
  45.     
  46.                     
  47.     
  48.                     <div class="form-group">
  49.                       <label for="textarea" class="text-heading h6 font-weight-semi-bold">Description</label>
  50.                       <textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
  51.                     </div>
  52.     
  53.                     <div class="float-right">
  54.                       <button type="button" href="#step2" data-toggle="tab" role="tab"
  55.                               class="btn mr-2 btn-primary btn next-step">
  56.                         Go To Step 2
  57.                       </button>
  58.                     </div>
  59.     
  60.                   </div>
  61.     
  62.                   <div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
  63.     
  64.                     
  65.                     <div class="form-group">
  66.                       <label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
  67.                       <textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
  68.                     </div>
  69.     
  70.                     <button type="button" href="#step1" data-toggle="tab" role="tab"
  71.                             class="btn mr-2 btn-outline-primary btn prev-step">
  72.                       Back to Step 1
  73.                     </button>
  74.                     <button type="button" href="#step3" data-toggle="tab" role="tab"
  75.                             class="btn mr-2 btn-primary btn next-step">
  76.                       Go To Step 3
  77.                     </button>
  78.                   </div>
  79.                   <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
  80.                     <div class="form-group">
  81.                       <label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
  82.                       <input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
  83.                     </div>
  84.     
  85.                     <div class="form-group">
  86.                       <label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
  87.                       <input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
  88.                     </div>
  89.     
  90.                     <button type="button" href="#step2" data-toggle="tab" role="tab"
  91.                             class="btn mr-2 btn-outline-primary btn prev-step">
  92.                       Go Back To Step 2
  93.                     </button>
  94.                     <button type="submit"
  95.                             class="btn mr-2 btn-primary btn">
  96.                       Store
  97.                     </button>
  98.     
  99.                   </div>
  100.                 </div>
  101.               </form>
  102.             </div>
  103.           </div>
  104.         </div>
  105.       </div>
  106.     </div>