javascript – 禁用bootstrap验证器提交按钮,直到整个表单有效

我已经搜索了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：

disabled>

使用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/