jQuery 验证移动 bootstrap 按钮插件

Question

我正在使用 jQuery 验证插件并且效果很好 - 但是，在我使用 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

Answer 2

我是这样修复的：

$(".input-group").find("label.error").detach().insertAfter($(".input-group"));

在 alert("not valid!"); 解决您的问题之前添加以上代码行。

Here is the JSFiddle demo

基本上它所做的是找到错误消息并将其移动到按钮组之后，以免使用 JQuery.

破坏结构

jQuery 验证移动 bootstrap 按钮插件

jQuery validation moves bootstrap button add-on

html

javascript

jquery

jquery-validate

twitter-bootstrap