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

Question

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

我正在使用Bootstrap Validator验证表单,它运行良好.我想禁用该submit按钮,直到整个表单有效并且Bootstrap Validator有一个isValid()功能.使用这个函数,我能做的最好就是使用keyup,这很难看.

每当表单评估其有效性时,都会有一个延迟时间,并且提交按钮会从有效闪烁到非常快速无效.

有没有办法解决这个闪烁与setTimeout或.delay()仍然有像现在一样的表单功能？

或者,是否有一个纯粹的Bootstrap Validator解决方案？(这将是理想的)我查看了文档,但找不到任何有用的东西.只有方法可以设置表单的验证时间,这对我的原因没有帮助.

这是一个演示问题的JSFiddle.

Answer 1

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

1. 我从改为触发keyup到status.field.bv其引导验证（BV）抛出每场状态更改时间。
2. 我没有使用isValid()jquery 函数（它不考虑 BV 设置），而是检查has-successBV 应用于每个form-group.
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/