Geek Answers Handbook

Disabling the download validator confirmation button until the entire form is valid

I have a StackOverflow search to solve this problem, but have not found one that works.

I validate the form using Bootstrap Validator and it works well. I want to disable the button submituntil the whole form is valid and the Bootstrap Validator function has a function isValid(). With this function, the best I can do is enable keyup, which is ugly.

Whenever a form evaluates its validity, the delay time and submit button flash instantly from valid to invalid.

Is there a way to fix this blinking with setTimeoutor .delay()and still have a form function as it is now?

Alternatively, is there a Bootstrap Validator authentication solution for this? (That would be ideal) I looked through the documentation, but did not find anything useful. There are only ways to set a form confirmation time, which does not help my reason.

Here is a JSFiddle that demonstrates the problem.

+4
source share
1 answer

I looked more closely at your code and eventually changed some key areas for the desired effect.

  • I changed the trigger from keyupto status.field.bv, which the bootstrap validator (BV) throws every time the field status changes.
  • isValid() jquery ( BV), has-success, BV form-group.
  • .

:

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/

+3

More articles:


All Articles