title: I am having trouble with validation and form wizard
body: <p>I have tried to add a form wizard with validation. The main problem I am facing is the disable function of the steps doesnt work. When I click on the step numbers on top, it just goes off without any validation.</p>
  
  <p>Here is my html</p>
  
  <pre><code>    &lt;div class="x_content"&gt;
                      &lt;div class="container"&gt;
                              &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"&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" required="required" 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" required="required" 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" required="required" 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" required="required" 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;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>    .stepwizard-step p {
       margin-top: 10px;
       }
  
       .stepwizard-row {
       display: table-row;
       }
  
       .stepwizard {
       display: table;
       width: 100%;
       position: relative;
       }
  
       .stepwizard-step button[disabled] {
       opacity: 1 !important;
       filter: alpha(opacity=100) !important;
       }
  
       .stepwizard-row:before {
       top: 14px;
       bottom: 0;
       position: absolute;
       content: " ";
       width: 100%;
       height: 1px;
       background-color: #ccc;
       z-order: 0;
  
       }
  
      .stepwizard-step {
      display: table-cell;
      text-align: center;
      position: relative;
      }
  
      .btn-circle {
      width: 30px;
      height: 30px;
      text-align: center;
      padding: 6px 0;
      font-size: 12px;
      line-height: 1.428571429;
      border-radius: 15px;
      }
  </code></pre>
  
  <p>The JS:</p>
  
  <pre><code>                $(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');
      });
  </code></pre>
  
  <p>Please let me know what am I doing wrong. How can I get it to work normally.
  Thanks a lot.</p>