title: Multi step form - Uncaught TypeError and the form is only submited with "novalidate" property
body: <p>I created a multi step form using bootstrap and jquery. </p>
  
  <p>When I click in some button to go to the next step it appears this error on the console:</p>
  
  <pre><code>tab.js:155 Uncaught TypeError: Cannot read property 'nodeName' of undefined
      at t.a._activate (tab.js:155)
      at t.a.show (tab.js:120)
      at HTMLButtonElement.&lt;anonymous&gt; (tab.js:249)
      at Function.each (jquery.min.js:2)
      at r.fn.init.each (jquery.min.js:2)
      at r.fn.init.t._jQueryInterface [as tab] (tab.js:236)
      at HTMLButtonElement.&lt;anonymous&gt; (tab.js:266)
      at HTMLDocument.dispatch (jquery.min.js:3)
      at HTMLDocument.q.handle (jquery.min.js:3)
  </code></pre>
  
  <p>Other issue is that when the submit button "Store" is clicked the form is not submitted, only is submited if I add to the element <code>&lt;form&gt;</code> this: "novalidate", like <code>&lt;form method="post" action=".." novalidate&gt;</code>. Without this property it appears always the error: "An invalid form control with name='conference_name' is not focusable." on the required fields. </p>
  
  <p>Do you know where is the issue?</p>
  
  <p>I have the html below for the multi step form:</p>
  
  <pre><code>@extends('app')
  @section('content')
  
    &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"&gt;Create Conference&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"  novalidate &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;
                  {{csrf_field()}}
                  &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="categories" class="text-heading h6 font-weight-semi-bold"&gt;Categories&lt;/label&gt;
                      &lt;select id="tag_list" required multiple class="form-control" name="categories" id="categories"&gt;
                        &lt;option&gt;1&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- more form-group... --&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 Setp 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_creator_description" class="text-heading h6 font-weight-semi-bold"&gt;Description&lt;/label&gt;
                    &lt;textarea required name="conference_creator_description" id="conference_creator_description" class="form-control" rows="3"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
  
                  &lt;!-- more form-group... --&gt; 
  
                  &lt;button type="button" href="#step1" data-toggle="tab" role="tab"
                          class="btn mr-2 btn-outline-primary btn prev-step"&gt;
                    Go Back to Step 1
                  &lt;/button&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 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;!-- more form-group... --&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;
  
  @endsection
  </code></pre>
  
  <p>Then the JS for the navigation between the multi step form steps:</p>
  
  <pre><code>@section('scripts.footer')
  
  &lt;script type="text/javascript"&gt;
  
      $(function(){
          $('a.nav-link').on('show.bs.tab', function (e) {
              var $target = $(e.target);
              if ($target.parent().hasClass('disabled')) {
                  return false;
              }
          });
  
          $(".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();
          }
      });
  
  
  &lt;/script&gt;
  
  @stop
  </code></pre>