disabling bootstrap validator submit button until entire form is valid

Question

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.

Answer 1

I looked more closely at your code and ended up changing some key areas for your desired effect.

1. I changed the trigger from keyup to status.field.bv which the bootstrap validator (BV) throws every time a field status changes.
2. Instead of using the 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.
3. I removed the success button from a 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/