禁用引导程序验证器的提交按钮，直到整个表单都有效

Question

我已经在StackOverflow上搜索了针对此问题的解决方案，但没有找到可行的解决方案。

我正在使用Bootstrap Validator验证表单，并且效果很好。 我想禁用submit按钮，直到整个表单有效并且Bootstrap Validator具有isValid()函数。 使用此功能，我所能做的最好是在键盘上，这很丑陋。

每当表单评估其有效性时，都会有一个滞后时间，并且提交按钮会很快从有效闪烁为无效。

有没有办法通过setTimeout或.delay()来解决此闪烁问题，并且仍然具有像现在一样的表单功能？

或者，是否有用于此的纯Bootstrap验证程序解决方案？ （这很理想）我浏览了文档，但是找不到任何有用的信息。 只有几种方法可以设置表单验证的时间，这对我的事业没有帮助。

这是一个演示问题的JSFiddle 。

Answer 1

我仔细查看了您的代码，最终更改了一些关键区域，以实现所需的效果。

1. 我将触发器从keyup更改为status.field.bv ，每次字段状态更改时，引导验证程序（BV）都会引发该触发器。
2. 我没有使用isValid() jQuery函数（该函数不考虑BV设置），而是检查了BV适用于每个form-group的has-success类的存在。
3. 我从表单组中删除了成功按钮。

代码如下：

HTML：

<form id="test">
    <div class="form-group">
        <input class="form-control input-lg" name="email" type="text" size="35" placeholder="Email*"></input>
    </div>
    <div class="form-group">
        <input class="form-control input-lg" name="password" type="password" size="35" placeholder="Confirm Password*"></input>
    </div>
    <input class="btn btn-lg btn-success submit-button" style="width: 100%;" value="Sign Up!" type="submit" disabled></input>
</form>

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/