javascript - jQuery 验证移动 Bootstrap 按钮附加组件

Question

我正在使用 jQuery Validation 插件并且效果很好 - 但是，在我使用 Bootstrap 按钮附加组件的字段上，当显示所需的警报时，按钮不会随文本框一起移动 - 我在这里复制了这个问题:jsfiddle

这是 html:

<form id="frmPO" action="" method="get" runat="server">
<div class="form-group input-sm">
            <div class="row">
                <div class="col-sm-6">
                    <label for="txtClientContract">
                        Client Contract</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="txtClientContract" runat="server" required/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btnClientContracts" >
                                ...</button>
                        </span>
                    </div>
                  </br>
           <div class="row">
                <div class="form-group col-sm-4">
                    <button id="btnSavePO" type="button" class="btn btn-default">
                        Create Purchase Order</button>
                </div>
            </div>
                </div>
  </div>
  </form>

非常感谢任何帮助，谢谢

Answer 1

这是因为验证插件在输入和跨度之间插入了标签。 您可以像这样在 div 标记后手动添加错误消息标签:-

 <label for="txtClientContract" generated="true" class="error"></label>
 //          ^ this is id for input 

Check Demo