我有一个使用bootstrap验证器验证的表单：
http://1000hz.github.io/bootstrap-validator/
我想将此表单分成几个步骤，让每个步骤中的每个输入在单击下一个按钮时验证，如果验证，则转到步骤2.
我相信如果我们可以结合使用jQuery步骤和Bootstrap验证器，就可以实现这一点。
喜欢此评论建议： 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 -->
答案 0 :(得分：1)
我认为bootstrap验证器不是满足您需求的最佳解决方案。尝试使用Twitter Bootstrap Wizard，其中包括向导 + 表单 验证，以便您轻松实现。< / p>