禁用Bootstrap验证器提交按钮，直到整个表单有效。

Question

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

我正在使用Bootstrap Validator验证表单，并且它工作得很好。 我想禁用提交按钮，直到整个表单都有效，而Bootstrap Validator有一个isValid()函数。 使用此功能，我能做的最好的事情是在keyup上进行操作，这很丑陋。

每当表单评估其有效性时，都会有一段时间的延迟，提交按钮会非常快地从有效变为无效并闪烁。

有没有办法使用setTimeout或.delay()来修复这种闪烁，并仍然使表单像现在一样运行？

或者，有没有纯Bootstrap Validator解决此问题的方法？ （这将是理想的）我已经查看了文档，但没有找到任何有用的东西。 只有设置验证表单的时间的方法，这对我的问题没有帮助。

这里有一个JSFiddle演示了这个问题。

- Trevor Hutto

Answer 1

我仔细查看了你的代码，并在一些关键区域进行了更改，以达到你想要的效果。

1. 我将触发器从 keyup 更改为 status.field.bv，这是 Bootstrap 验证器（BV）在每次字段状态更改时抛出的事件。
2. 我不再使用 isValid() jQuery 函数（该函数不考虑 BV 设置），而是检查是否存在 BV 应用于每个 form-group 的 has-success class。
3. 我删除了一个 form-group 中的 success 按钮。

代码如下：

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/

- Marcelo

---

当输入电子邮件且密码字段为空时，表单有效。 - Trevor Hutto

更新了解决方案。另外，你能将你的原始代码添加到问题中，以便未来查看此问题的人可以参考吗？ - Marcelo