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

Posted 2023-02-22

【中文标题】禁用引导验证器提交按钮，直到整个表单有效

【英文标题】：disabling bootstrap validator submit button until entire form is valid

【发布时间】：2015-01-06 22:51:09

【问题描述】：

我已在 *** 上搜索此问题的解决方案，但没有找到可行的解决方案。

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

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

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

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

这里有一个JSFiddle 来说明问题。

【参考方案1】：

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

我将触发器从 keyup 更改为 status.field.bv，每次字段状态更改时引导验证程序 (BV) 都会抛出该触发器。 我没有使用 isValid() jquery 函数（不考虑 BV 设置），而是检查是否存在 BV 应用于每个 form-group 的 has-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/

【讨论】：

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

更新了解决方案。另外，您能否将您的原始代码添加到问题中以供将来发现此问题的任何人使用？