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

Question

我已经搜索了StackOverflow来解决这个问题，但没有找到一个有效的解决方案。

我正在使用引导验证器验证表单，它运行良好。我想禁用submit按钮，直到整个表单有效并且引导验证器具有isValid()功能。使用这个函数，我能做的最好的事情就是在 keyup 上，这很丑陋。

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

有没有办法用setTimeout或.delay()修复这种闪烁，并且仍然像现在一样具有表单功能？

或者，是否有一个纯粹的引导验证器解决方案？(这将是理想的(我已经浏览了文档，但找不到任何有用的东西。只有方法可以设置表单的验证时间，这对我的事业没有帮助。

下面是演示该问题的 JSFiddle。

Answer 1

我更仔细地研究了您的代码，最终更改了一些关键区域以获得您想要的效果。

1. 我将触发器从 keyup 更改为每次字段状态更改时引导验证程序 (BV( 抛出的status.field.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/