title: jQuery - Form Validation with tabs outside of form
body: <p>I am using the <a href="http://formvalidation.io/examples/bootstrap-wizard/" rel="nofollow">FormValidation plugin for jQuery</a> - and I am trying to create a form wizard using the <code>bootstrap tabs</code>. This is my code so far:</p>
  
  <pre><code>&lt;form class="center-form" id="installationForm" method="post"&gt;
      &lt;!-- Tab panes --&gt;
      &lt;div class="tab-content"&gt;
          &lt;! -- #tab1 --&gt;
          &lt;div role="tabpanel" class="tab-pane active" id="details"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Title&lt;/label&gt;
                  &lt;input type="text" class="ad-title form-control" name="title" value="" placeholder="Enter your advertisement title..."&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;! -- #tab1 end --&gt;
          &lt;! -- #tab2 --&gt;
          &lt;div role="tabpanel" class="tab-pane active" id="audience"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label&gt;Description&lt;/label&gt;
                  &lt;input type="text" class="ad-title form-control" name="description" value="" placeholder="Enter your advertisement title..."&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;! -- #tab2 end --&gt;
  
      &lt;/div&gt;
      &lt;ul class="pager wizard"&gt;
          &lt;li class="previous"&gt;&lt;a href="javascript:void(0)"&gt;Previous&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="next"&gt;&lt;a href="javascript:void(0);"&gt;Next&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  
  &lt;ul class="nav nav-tabs ad-creation" id="progress"&gt;
          &lt;li class="active"&gt; &lt;a href="#details" data-toggle="tab" class="button btn-round"&gt;tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href="#audience" data-toggle="tab" class="button btn-round"&gt;tab2&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my javascript:</p>
  
  <pre><code>$(document).ready(function() {
      $('#installationForm')
          .formValidation({
              framework: 'bootstrap',
              icon: {
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
              },
              // This option will not ignore invisible fields which belong to inactive panels
              excluded: ':disabled',
              fields: {
                  name: {
                      validators: {
                          notEmpty: {
                              message: 'The site name is required'
                          }
                      }
                  },
                  url: {
                      validators: {
                          notEmpty: {
                              message: 'The URL is required'
                          },
                          uri: {
                              message: 'The URL is not valid'
                          }
                      }
                  }
              }
          })
          .bootstrapWizard({
              tabClass: 'nav nav-pills',
              onTabClick: function(tab, navigation, index) {
                  return validateTab(index);
              },
              onNext: function(tab, navigation, index) {
                  var numTabs    = $('#progress').find('.tab-pane').length,
                      isValidTab = validateTab(index - 1);
                  if (!isValidTab) {
                      return false;
                  }
  
                  if (index === numTabs) {
                      // We are at the last tab
  
                  }
  
                  return true;
              },
              onPrevious: function(tab, navigation, index) {
                  return validateTab(index + 1);
              },
              onTabShow: function(tab, navigation, index) {
                  // Update the label of Next button when we are at the last tab
                  var numTabs = $('#progress').find('.tab-pane').length;
                  $('#installationForm')
                      .find('.next')
                          .removeClass('disabled')    // Enable the Next button
                          .find('a')
                          .html(index === numTabs - 1 ? 'Install' : 'Next');
  
              }
          });
  
      function validateTab(index) {
          var fv   = $('#installationForm').data('formValidation'), // FormValidation instance
              // The current tab
              $tab = $('#installationForm').find('.tab-pane').eq(index);
  
          // Validate the container
          fv.validateContainer($tab);
  
          var isValidStep = fv.isValidContainer($tab);
          if (isValidStep === false || isValidStep === null) {
              // Do not jump to the target tab
              return false;
          }
  
          return true;
      }
  });
  </code></pre>
  
  <p>Now - the validation works <strong>IF</strong> I move the <code>#progress</code> inside the <code>#installionForm</code> form tag. </p>
  
  <p>My question is how can I get it to validate the form fields inside the tabs, <strong>and</strong> have the <code>#progress</code> moved out of the <code>#installationForm</code>?</p>