Javascript Jquery验证和使用twitter引导面板

我有一个使用jquery验证插件的引导（电子商务结帐）表单，需要实现一些行为：

面板折叠会触发一个验证事件（请参阅下面的代码），允许用户移动到下一个面板-现在验证代码不起作用，并在提交处理程序启动时添加“has error”类。我在想到底发生了什么事。同一页上还有其他表单可以验证fine

单击“下一步”时，将面板折叠为静态文本，其中包含用户输入的值——当面板未折叠时，表单将重新显示，以便用户可以修改

谢谢你的帮助

表格代码

<form id="storecheckout" method="post" action="/mobile/store_checkout.cfm" class="form-horizontal" role="form">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1" style="cursor:pointer;">
<h2 class="panel-title">
<span class="badge">1</span> Customer/Shipping Information <span class="glyphicons glyphicons-circle-minus  pull-right"></span>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="form-group">
<label for="ship_firstName" class="col-sm-4 control-label">First Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ship_lastName" class="col-sm-4 control-label">Last Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ship_ad1" class="col-sm-4 control-label">Address/1 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad1" name="ship_ad1" placeholder="Address/1">
</div>
</div>
<div class="form-group">
<label for="ship_ad2" class="col-sm-4 control-label">Address/2 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad2" name="ship_ad2" placeholder="Address/2">
</div>
</div>
<div class="form-group">
<label for="ship_city" class="col-sm-4 control-label">City :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_city" name="ship_city" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="ship_state" class="col-sm-4 control-label">State/Province :</label>
<div class="col-sm-8">
<SELECT NAME="ship_state" id="ship_state" class="form-control">
<OPTION VALUE="AL" >Alabama</OPTION>
</SELECT>
</div>
</div>

<div class="form-group">
<label for="ship_zip" class="col-sm-4 control-label">Postal Code :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_zip" name="ship_zip" placeholder="Postal Code">
</div>
</div>
<div class="form-group">
<label for="ship_country" class="col-sm-4 control-label">Country :</label>
<div class="col-sm-8">
<select name="ship_country" id="ship_country" class="form-control">
<option value="US" selected>United States</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email :</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-4 control-label">Phone :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
</div>

</div>



<div class="row">
<div class="col-xs-6 col-sm-4">&nbsp;
</div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapsex" data-parent="#accordion" href="#collapse2x" aria-expanded="true" aria-controls="collapse2x" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>

</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">2</span> Shipping Method <span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">

List Shipping Methods

<div class="row">
<div class="col-xs-6 col-sm-4">&nbsp;</div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>

</div>
</div>
</div>
</div>      

<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">3</span> Payment Information<span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">

Payment Info

</div>
</div>
</div>

<button type="submit" id="submit" class="btn btn-block btn-large btn-success">Submit Order</button>
<input type="submit" name="su" value="sub">

<!-- end panel group -->
</div>
</form>  

---

在您的

表单输入中

，我发现您没有给出

“姓名”

输入属性

您的代码

<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">

更新代码

<input type="text" class="form-control" id="ship_firstName"  name="ship_firstName" placeholder="First Name">

---

这将起作用

感谢您的投入。那是行不通的。如果我没有弄错的话，Jquery验证只需要输入id，而不需要输入名称。不管怎样，我都没有得到想要的行为。不管怎样，名字中的大写字母“N”也起了作用。现在可以了。

<input type="text" class="form-control" id="ship_firstName"  name="ship_firstName" placeholder="First Name">