我已经搜索了StackOverflow来解决这个问题,但是没有找到一个有效的解决方案.
我正在使用Bootstrap Validator验证表单,它运行良好.我想禁用提交按钮,直到整个表单有效并且Bootstrap Validator有一个isValid()函数.使用这个函数,我能做的最好就是使用keyup,这很难看.
每当表单评估其有效性时,都会有一个延迟时间,并且提交按钮会从有效闪烁到非常快速无效.
有没有办法用setTimeout或.delay()修复这个闪烁,并且仍然具有像现在这样的表单函数?
或者,是否有一个纯粹的Bootstrap Validator解决方案? (这将是理想的)我查看了文档,但找不到任何有用的东西.只有方法可以设置表单的验证时间,这对我的原因没有帮助.
这是一个证明问题的JSFiddle.
最佳答案
我仔细查看了您的代码,最后更改了一些关键区域以达到您想要的效果.
>我将触发器从keyup更改为status.field.bv,每次字段状态更改时bootstrap验证器(BV)都会抛出该触发器.
>不是使用isValid()jquery函数(不考虑BV设置),而是检查是否存在BV适用于每个表单组的has-success类.
>我从表单组中删除了成功按钮.
代码如下:
HTML:
使用Javascript:
$( '#test' ).on( 'status.field.bv',function( e,data ) {
let $this = $( this );
let formIsValid = true;
$( '.form-group',$this ).each( function() {
formIsValid = formIsValid && $( this ).hasClass( 'has-success' );
});
$( '.submit-button',$this ).attr( 'disabled',!formIsValid );
});
JSFiddle:http://jsfiddle.net/ejyef7vc/3/