title: How to validate a button step form with nav tabs and bootstrap validation
body: <p>I've got some kind of &quot;step form&quot; with nav tabs and button navigation between tabs. I want to prevent the tabs from changing to the next one if the user has not completed the required inputs of the current tab. How can I make the current tab button to validate the form by using the bootstrap 4 validator? I've tried with multiple form submit inputs but it doesn't work</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//BUTTON NAVIGATION BETWEEN TABS
  $('.next').click(function () {
      $('.nav-tabs &gt; .nav-item &gt; .active').parent().next('li').find('a').trigger('click');
  });
  
  $('.previous').click(function () {
      $('.nav-tabs &gt; .nav-item &gt; .active').parent().prev('li').find('a').trigger('click');
  });
  
  // BOOTSTRAP FORM VALIDATION
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2"&gt;&lt;/div&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;ul class="nav nav-tabs text-center" id="myTab" role="tablist"&gt;
                      &lt;li class="nav-item" role="presentation"&gt;
                          &lt;a class="nav-link" id="step1-tab" data-toggle="tab" href="#step1" role="tab" aria-controls="step1" aria-selected="false"&gt;Step 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item" role="presentation"&gt;
                          &lt;a class="nav-link" id="step2-tab" data-toggle="tab" href="#step2" role="tab" aria-controls="step2" aria-selected="false"&gt;Step 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item" role="presentation"&gt;
                          &lt;a class="nav-link" id="step3-tab" data-toggle="tab" href="#step3" role="tab" aria-controls="step3" aria-selected="false"&gt;Step 2&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;form action="" class="needs-validation" novalidate&gt;
                      &lt;div class="tab-content" id="myTabContent"&gt;
                          &lt;div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab"&gt;
                              &lt;br&gt; 
                              &lt;label for="input1"&gt;INPUT 1&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="input1" required&gt;  
                              &lt;div class="invalid-feedback"&gt;REQUIRED FIELD&lt;/div&gt;
                              &lt;button class="btn btn-lg next"&gt;Next&lt;/button&gt;
                          &lt;/div&gt; 
                          &lt;div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab"&gt;
                              &lt;br&gt; 
                              &lt;label for="input2"&gt;INPUT 2&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="input2" required&gt;   
                              &lt;div class="invalid-feedback"&gt;REQUIRED FIELD&lt;/div&gt;
                              &lt;button class="btn btn-lg back"&gt;Back&lt;/button&gt;
                              &lt;button class="btn btn-lg next"&gt;Next&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab"&gt;
                              &lt;br&gt; 
                              &lt;label for="input3"&gt;INPUT 3&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="input3" required&gt;  
                              &lt;div class="invalid-feedback"&gt;REQUIRED FIELD&lt;/div&gt;
                              &lt;button class="btn btn-lg back"&gt;Back&lt;/button&gt;
                              &lt;button type="submit" class="btn btn-lg"&gt;Submit&lt;/button&gt;   
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>