title: jQuery multi-step form validation
body: <p>I Want to Validate Multi-Step Bootstrap From With Jquery validation.</p>
  
  <p>I Set required for 1st input field but the form is submitted without checking jquery validation ...</p>
  
  <p>The Form will be not go save page is the first input field is fill up...</p>
  
  <pre><code>&lt;div class="stepwizard"&gt;
      &lt;div class="stepwizard-row setup-panel"&gt;
          &lt;div class="stepwizard-step"&gt;
              &lt;a href="#step-1" type="button" class="btn btn-primary btn-circle"&gt;1&lt;/a&gt;
              &lt;p&gt;Step 1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="stepwizard-step"&gt;
              &lt;a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"&gt;2&lt;/a&gt;
              &lt;p&gt;Step 2&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="stepwizard-step"&gt;
              &lt;a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"&gt;3&lt;/a&gt;
              &lt;p&gt;Step 3&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;form role="form" id="myform" action='/save'&gt;
      &lt;div class="row setup-content" id="step-1"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h3&gt; Step 1&lt;/h3&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;First Name&lt;/label&gt;
                      &lt;input  maxlength="100" type="text"  id="field" name="field" class="form-control" placeholder="Enter First Name"  /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Last Name&lt;/label&gt;
                      &lt;input maxlength="100" type="text" class="form-control" placeholder="Enter Last Name" /&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-primary nextBtn btn-lg pull-right" type="button" &gt;Next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row setup-content" id="step-2"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h3&gt; Step 2&lt;/h3&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Company Name&lt;/label&gt;
                      &lt;input maxlength="200" type="text"  class="form-control" placeholder="Enter Company Name" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Company Address&lt;/label&gt;
                      &lt;input maxlength="200" type="text"  class="form-control" placeholder="Enter Company Address"  /&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-primary nextBtn btn-lg pull-right" type="button" &gt;Next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row setup-content" id="step-3"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h3&gt; Step 3&lt;/h3&gt;
                  &lt;button class="btn btn-success btn-lg pull-right" type="submit"&gt;Finish!&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;script&gt;
  jQuery.validator.setDefaults({
    debug: false,
    success: "valid"
  });
  $( "#myform" ).validate({
    rules: {
      field: {
        required: true
      }
    }
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
      var navListItems = $('div.setup-panel div a'),
              allWells = $('.setup-content'),
              allNextBtn = $('.nextBtn');
  
      allWells.hide();
  
      navListItems.click(function (e) {
          e.preventDefault();
          var $target = $($(this).attr('href')),
                  $item = $(this);
  
          if (!$item.hasClass('disabled')) {
              navListItems.removeClass('btn-primary').addClass('btn-default');
              $item.addClass('btn-primary');
              allWells.hide();
              $target.show();
              $target.find('input:eq(0)').focus();
          }
      });
  
      allNextBtn.click(function(){
          var curStep = $(this).closest(".setup-content"),
              curStepBtn = curStep.attr("id"),
              nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
              curInputs = curStep.find("input[type='text'],input[type='url']"),
              isValid = true;
  
          $(".form-group").removeClass("has-error");
          for(var i=0; i&lt;curInputs.length; i++){
              if (!curInputs[i].validity.valid){
                  isValid = false;
                  $(curInputs[i]).closest(".form-group").addClass("has-error");
              }
          }
  
          if (isValid)
              nextStepWizard.removeAttr('disabled').trigger('click');
      });
  
      $('div.setup-panel div a.btn-primary').trigger('click');
  });
  &lt;/script&gt;
  </code></pre>