BootstrapValidator ignoring Enter keypress on complete form

Question

We're using bootstrapValidator to validate all our forms, but on our login form if the user presses enter or return and everything is valid, nothing happens.

Here's the html we're using:

<form id="signin" name="signin" class="validate-live" method="POST">
    <fieldset>
        <!-- Email -->
        <div class="form-group">
            <label class="control-label sr-only" for="email">Email</label>  
            <input id="email" name="email" type="email" placeholder="Email" 
                class="form-control"
                data-bv-notempty="true"
                data-bv-notempty-message="Please enter your email"
            >
        </div>

        <!-- Password -->
        <div class="form-group">
            <label class="control-label sr-only" for="password">Password</label>  
            <input id="password" name="password" type="password" placeholder="Password"
                class="form-control"
                data-bv-notempty="true"
                data-bv-notempty-message="Please enter your password"
            >
        </div>

        <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button>
        <a href="reset-password.php" class="btn btn-link-secondary btn-forgot" >Forgot password?</a>            
      </fieldset> 
    </form>

and the bootstrapValidator code:

$(document).ready(function() {
    $('.validate-live').bootstrapValidator({
        live: 'enabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: '#submit_button',
        trigger: null
    }).on('error.field.bv', function(e, data) {
        data.bv.disableSubmitButtons(true);
    }).on('success.field.bv', function(e, data) {
        data.bv.disableSubmitButtons(false);
        if (data.bv.getInvalidFields().length>0) {
            data.bv.disableSubmitButtons(true);
        }
    });
});

I've added some console.logs to the event handlers, and they showed that the validator activates on the keypresses, and if the form's invalid then the prompts get displayed, but if the form's fine nothing happens until the user actually clicks on the #submit_button button.

Answer 1

Not seeing any reason to assign submitButtons: '#submit_button'

Just remove submitButtons: '#submit_button', will fix the issue.

JS

$(document).ready(function() {
  $('.validate-live').bootstrapValidator({
    live: 'enabled',
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    //submitButtons: '#submit_button',
    trigger: null
  }).on('error.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(true);
  }).on('success.field.bv', function(e, data) {
    data.bv.disableSubmitButtons(false);
    if (data.bv.getInvalidFields().length > 0) {
      data.bv.disableSubmitButtons(true);
    }
  });
});

HTML

<form id="signin" name="signin" class="validate-live" method="POST">
  <fieldset>
    <!-- Email -->
    <div class="form-group">
      <label class="control-label sr-only" for="email">Email</label>
      <input id="email" name="email" type="email" placeholder="Email" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your email">
    </div>

    <!-- Password -->
    <div class="form-group">
      <label class="control-label sr-only" for="password">Password</label>
      <input id="password" name="password" type="password" placeholder="Password" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your password">
    </div>

    <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button>
    <a href="reset-password.php" class="btn btn-link-secondary btn-forgot">Forgot password?</a>
  </fieldset>
</form>

Working Fiddle