6

我在 StackOverflow 上搜索了解决此问题的方法，但没有找到可行的方法。

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

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

有没有办法用setTimeoutor解决这个闪烁问题，.delay()并且仍然像现在一样拥有表单功能？

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

这是一个演示问题的JSFiddle。

4

1 回答 1

5

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

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

于 2014-11-10T15:38:55.373 回答