twitter-bootstrap 禁用引导验证程序提交按钮，直到整个表单有效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26847110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disabling bootstrap validator submit button until entire form is valid
提问by Trevor Hutto
I have search StackOverflow for a solution to this problem but have not found one that works.
我在 StackOverflow 上搜索了这个问题的解决方案，但没有找到一个有效的解决方案。
I am validating a form with Bootstrap Validator and it works well. I want to disable the submitbutton until the entire form is valid and Bootstrap Validator has an isValid()function. Using this function, the best I can do is on keyup, which is ugly.
我正在使用 Bootstrap Validator 验证表单，它运行良好。我想禁用submit按钮，直到整个表单都有效并且 Bootstrap Validator 有一个isValid()功能。使用这个功能，我能做的最好的就是在 keyup 上，这很难看。
Whenever the form is evaluating its validity, there is a lag time and the submit button blinks from valid to not valid very quickly.
每当表单评估其有效性时，都会有一段滞后时间，提交按钮会很快从有效变为无效。
Is there a way to fix this blinking with setTimeoutor .delay()and still have the form function like it does now?
有没有办法解决这个闪烁的问题，setTimeout或者.delay()仍然像现在一样具有表单功能？
Alternatively, is there a pure Bootstrap Validator solution for this? (This would be ideal) I have looked through the documentation, but could not find anything helpful. There are only ways to set the time of which the form is validated, which does not help my cause.
或者，是否有一个纯粹的 Bootstrap Validator 解决方案？（这将是理想的）我浏览了文档，但找不到任何有用的东西。只有设置表单验证时间的方法，这对我的事业没有帮助。
Here is a JSFiddlethat demonstrates the problem.
这是一个演示该问题的JSFiddle。
采纳答案by Marcelo
I looked more closely at your code and ended up changing some key areas for your desired effect.
我更仔细地查看了您的代码，最终更改了一些关键区域以获得您想要的效果。
- I changed the trigger from
keyuptostatus.field.bvwhich the bootstrap validator (BV) throws every time a field status changes. - Instead of using the
isValid()jquery function (which does not take into account the BV settings), I check for the presence of thehas-successclass which BV applies to eachform-group. - I removed the success button from a form-group.
- 我从改为触发
keyup到status.field.bv其引导验证（BV）抛出每场状态更改时间。 - 我没有使用
isValid()jquery 函数（它不考虑 BV 设置），而是检查has-successBV 应用于每个form-group. - 我从表单组中删除了成功按钮。
The code is as follows:
代码如下：
HTML:
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:
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/
JSFiddle：http: //jsfiddle.net/ejyef7vc/3/
