I have search StackOverflow for a solution to this problem but have not found one that works.
I am validating a form with Bootstrap Validator and it works well. I want to disable the submit
button 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.
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 setTimeout
or .delay()
and still have the form function like it does now?
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.
Here is a JSFiddle that demonstrates the problem.
I looked more closely at your code and ended up changing some key areas for your desired effect.
keyup
to status.field.bv
which the bootstrap validator (BV) throws every time a field status changes.isValid()
jquery function (which does not take into account the BV settings), I check for the presence of the has-success
class which BV applies to each form-group
.The code is as follows:
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/