使用 Bootstrap 验证器的 jQuery 步骤

Posted 2023-05-08

【中文标题】使用 Bootstrap 验证器的 jQuery 步骤

【英文标题】：jQuery steps with Bootstrap validator

【发布时间】：2017-11-24 14:27:07

【问题描述】：

我有一个使用引导验证器验证的表单：

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 -->

【参考方案1】：

我认为引导验证器不是满足您需求的最佳解决方案。尝试使用包含 wizard + form validation 的Twitter Bootstrap Wizard，以便您轻松实现它。

【讨论】：

感谢您的建议。我会尝试使用它，看看它是否适用于我给定的情况。 +1