javascript - jQuery 步骤与 Bootstrap 验证器

Question

我有一个使用 Bootstrap 验证器进行验证的表单:

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

我认为 Bootstrap 验证器并不是满足您需求的最佳解决方案。尝试使用Twitter Bootstrap Wizard其中包括向导 + 表单 验证，以便您可以轻松实现它。