title: How to validate in each step the required fields? (that is, the next button should only work if required fields are valid and not empty)
body: <p>I´m creating a multi-step form using bootstrap and jquery with 4 steps. </p>
  
  <p>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.</p>
  
  <p>But I´m not having success implementing this part of validating each step the required fields. Do you know how to do that?</p>
  
  <p>Working example: <a href="https://jsfiddle.net/4vzf9qgr/2/" rel="nofollow noreferrer">https://jsfiddle.net/4vzf9qgr/2/</a></p>
  
  <p>Jquery:</p>
  
  <pre><code>$(function(){
  
    // navigation buttons
  
    $('a.nav-link').on('show.bs.tab', function (e) {
      var $target = $(e.target);
      if ($target.parent().hasClass('disabled')) {
        e.preventDefault();
      }
    });
  
    $(".next-step").click(function (e) {
      var $active = $('.nav-pills li a.active');
      $active.parent().next().removeClass('disabled');
      nextTab($active);
    });
  
    $(".prev-step").click(function (e) {
      var $active = $('.nav-pills li a.active');
      prevTab($active);
    });
  
    function nextTab(elem) {
      $(elem).parent().next().find('a.nav-link').click();
    }
    function prevTab(elem) {
      $(elem).parent().prev().find('a.nav-link').click();
    }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="bg-light-gray2"&gt;
    &lt;div class="container nopadding py-4"&gt;
      &lt;div class="row justify-content-center align-items-center"&gt;
        &lt;div class="col-12"&gt;
          &lt;h1 class="h5 text-center text-heading-blue font-weight-bold"&gt;Page Title&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row mt-3 d-flex justify-content-center"&gt;
        &lt;div class="col-12"&gt;
          &lt;div class="registration_form"&gt;
            &lt;ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist"&gt;
              &lt;li class=""&gt;
                &lt;a class="nav-link active" href="#step1" data-toggle="tab" role="tab"&gt;
                  Step 1&lt;br&gt;&lt;small class="d-none d-md-inline-block"&gt;General Info&lt;/small&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="disabled"&gt;
                &lt;a class="nav-link" href="#step2" data-toggle="tab" role="tab"&gt;
                  Step 2&lt;br&gt;&lt;small class="d-none d-md-inline-block"&gt;Conference Creator Info&lt;/small&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="disabled"&gt;
                &lt;a class="nav-link" href="#step3" data-toggle="tab" role="tab"&gt;
                  Step 3&lt;br&gt;&lt;small class="d-none d-md-inline-block"&gt;Registration Types&lt;/small&gt;&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;form method="post" name="test" class="clearfix" action="/conference/store"&gt;
              &lt;div class="tab-content registration_body bg-white" id="myTabContent"&gt;
                &lt;div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab"&gt;
  
                  &lt;div class="form-group"&gt;
                    &lt;label for="conference_name" class="text-heading h6 font-weight-semi-bold"&gt;Conference Name&lt;/label&gt;
                    &lt;input type="text" required class="form-control" name="conference_name" id="conference_name"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-row"&gt;
                    &lt;div class="form-group col-lg-6"&gt;
                      &lt;label for="conference_categories" class="text-heading h6 font-weight-semi-bold"&gt;Categories&lt;/label&gt;
                      &lt;select id="tag_list"  multiple class="form-control" name="conference_categories" id="conference_categories"&gt;
                        &lt;option&gt;category1&lt;/option&gt;
                        &lt;option&gt;category2&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                  &lt;div class="form-group"&gt;
                    &lt;label for="textarea" class="text-heading h6 font-weight-semi-bold"&gt;Description&lt;/label&gt;
                    &lt;textarea class="form-control" name="conference_description" id="textarea" rows="3"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
  
                  &lt;div class="float-right"&gt;
                    &lt;button type="button" href="#step2" data-toggle="tab" role="tab"
                            class="btn mr-2 btn-primary btn next-step"&gt;
                      Go To Step 2
                    &lt;/button&gt;
                  &lt;/div&gt;
  
                &lt;/div&gt;
  
                &lt;div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab"&gt;
  
  
                  &lt;div class="form-group"&gt;
                    &lt;label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold"&gt;Description&lt;/label&gt;
                    &lt;textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
  
                  &lt;button type="button" href="#step1" data-toggle="tab" role="tab"
                          class="btn mr-2 btn-outline-primary btn prev-step"&gt;
                    Back to Step 1
                  &lt;/button&gt;
                  &lt;button type="button" href="#step3" data-toggle="tab" role="tab"
                          class="btn mr-2 btn-primary btn next-step"&gt;
                    Go To Step 3
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="registration_type_name" class="text-heading h6 font-weight-semi-bold"&gt;Registration Type Name&lt;/label&gt;
                    &lt;input type="text" required class="form-control" name="registration_type_name" id="registration_type_name"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                    &lt;label for="registration_type_description" class="text-heading h6 font-weight-semi-bold"&gt;Registration Type Description&lt;/label&gt;
                    &lt;input type="text" class="form-control" name="registration_type_description" id="registration_type_description"&gt;
                  &lt;/div&gt;
  
                  &lt;button type="button" href="#step2" data-toggle="tab" role="tab"
                          class="btn mr-2 btn-outline-primary btn prev-step"&gt;
                    Go Back To Step 2
                  &lt;/button&gt;
                  &lt;button type="submit"
                          class="btn mr-2 btn-primary btn"&gt;
                    Store
                  &lt;/button&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>