jQuery验证移动了Bootstrap按钮附加组件 [英] jQuery validation moves bootstrap button add-on
本文介绍了jQuery验证移动了Bootstrap按钮附加组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用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屋!
查看全文