jQuery的步骤与引导验证

Question

我有与引导验证器验证的一种形式：

http://1000hz.github.io/bootstrap-validator/

欲这种形式分离成步骤和有各在每个步骤中验证输入被点击下一个按钮时如果它验证，然后转到步骤2.

我相信如果我们可以结合使用jQuery步骤和Bootstrap验证程序，就可以实现这一点。

http://www.jquery-steps.com/

像这种意见建议： https://github.com/1000hz/bootstrap-validator/issues/491

我一直在努力这样做，但不成功为止。有没有办法？

我已经做了的jsfiddle此：

https://jsfiddle.net/mpLpwt7L/

这是到目前为止我的代码：

 <div class="steps-nav"> 
      <div class="row bs-wizard" style="border-bottom: 0;"> 
       <div class="col-xs-3 bs-wizard-step complete step-active"> 
        <div class="progress"><div class="progress-bar"></div></div> 
        <a href="#" class="bs-wizard-dot"> 
        1 
        </a> 
        <div class="bs-wizard-info text-center">Vehicle details</div> 
       </div> 

       <div class="col-xs-3 bs-wizard-step"> 
        <div class="progress"><div class="progress-bar"></div></div> 
        <a href="#" class="bs-wizard-dot"> 
        2 
        </a> 
        <div class="bs-wizard-info text-center">Location</div> 
       </div> 

       <div class="col-xs-3 bs-wizard-step"> 
        <div class="progress"><div class="progress-bar"></div></div> 
       <a href="#" class="bs-wizard-dot"> 
        3 
        </a> 
        <div class="bs-wizard-info text-center">Type of Wash</div> 
       </div> 

       <div class="col-xs-3 bs-wizard-step disabled"> 
        <div class="progress"><div class="progress-bar"></div></div> 
       <a href="#" class="bs-wizard-dot"> 
        4 
        </a> 
        <div class="bs-wizard-info text-center">Bills</div> 
       </div> 
      </div><!-- end bs-wizard --> 

     </div><!-- end steps-nav --> 
    </div><!-- end container --> 
</header><!-- end header --> 

<main id="main"> 
    <div class="container"> 
    <form role="form" class="order-form" method="post"> 
       <div class="row setup-content" id="step-1"> 
        <div class="steps-inner"> 
         <div class="col-md-12"> 
          <h3>Vehicle Details</h3> 
          <p> 
          Tell us what are we washing 
          </p> 
          <div class="row"> 
          <div class="col-sm-4"> 
           <div class="form-group"> 
            <!--<label></label>--> 
            <input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required /> 
            <div class="help-block with-errors"></div> 
           </div><!-- end form-group --> 
          </div> 
          <div class="col-sm-4"> 
           <div class="form-group"> 
            <input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required /> 
            <div class="help-block with-errors"></div> 
           </div><!-- end form-group --> 
          </div> 
          <div class="col-sm-4"> 
           <div class="form-group"> 
            <input type="text" name="vehicle_model" class="form-control" data-error="Model is required" placeholder="Model" required /> 
            <div class="help-block with-errors"></div> 
           </div><!-- end form-group --> 
          </div> 
          </div><!-- end row --> 

          <div class="row"> 
          <div class="col-sm-6"> 
           <div class="form-group"> 
            <input type="text" name="vehicle_color" class="form-control" data-error="Color is required" placeholder="Color" required /> 
            <div class="help-block with-errors"></div> 
           </div><!-- end form-group --> 
          </div> 
          <div class="col-sm-6"> 
           <div class="form-group"> 
            <input type="text" name="plate_number" class="form-control" data-error="Plate number is required" placeholder="Lic Plate" required /> 
            <div class="help-block with-errors"></div> 
           </div><!-- end form-group --> 
          </div> 
          </div><!-- end row --> 

          <div class="text-center form-submit"> 
           <button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button> 
          </div> 
         </div> 
        </div><!-- end steps-inner --> 
       </div><!-- end setup-content --> 

       <div class="row setup-content" id="step-2"> 
        <div class="steps-inner"> 
         <div class="col-md-12"> 
          <h3>Location</h3> 
          <p> 
          Tell us where it is 
          </p> 

          <p class="map-address"> 
          <i class="fa fa-map-marker"></i> 
          <input type="text" name="address" id="address_autocomplete" placeholder="Enter Your Address" /> 
          </p>      

          <div class="text-center form-submit"> 
           <button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button> 
          </div> 
        </div><!-- end steps-inner --> 
       </div> 
      </div><!-- end setup-content --> 

Answer 1

我想引导验证是不是适合您需求的最佳解决方案。尝试使用Twitter Bootstrap Wizard其中包括向导+形式验证，所以你可以很容易地实现它。