jQuery验证移动了Bootstrap按钮附加组件 [英] jQuery validation moves bootstrap button add-on

问题描述

我正在使用jQuery Validation插件，并且效果很好-但是，在我正在使用自举按钮附件的字段上，当显示所需的警报时，按钮不会随文本框移动-我已在此处复制了该问题: jsfiddle

I am using the jQuery Validation plugin and it works great - however, on a field where I am using a bootstrap button add-on, when the required alert is shown, the button doesn't move with the text box - I've replicated the issue here: 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>

任何帮助将不胜感激，谢谢

Any help would be much appreciated, thanks

推荐答案

这是因为验证插件在输入和跨度之间插入了标签. 您可以在div标签后手动添加错误消息标签，如下所示:-

It is because the label inserted by validation plugin between input and span. You can add label for error message manually after div tag like this:-

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

查看演示

这篇关于jQuery验证移动了Bootstrap按钮附加组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！