jquery - BootstrapValidator ignoring Enter keypress on complete form -
we're using bootstrapvalidator validate our forms, on our login form if user presses enter or return , valid, nothing happens.
here's 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 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 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 bootstrapvalidator code:
$(document).ready(function() { $('.validate-live').bootstrapvalidator({ live: 'enabled', message: 'this value 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 console.logs event handlers, , showed validator activates on keypresses, , if form's invalid prompts displayed, if form's fine nothing happens until user clicks on #submit_button button.
not seeing reason assign submitbuttons: '#submit_button'
just remove submitbuttons: '#submit_button', fix issue.
js
$(document).ready(function() { $('.validate-live').bootstrapvalidator({ live: 'enabled', message: 'this value 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 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 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>
Comments
Post a Comment