jQuery validate: Using remote validation causes error styling to be removed -
when using remote rule , validation passes rule, if other fields invalid, show error messages, have error styling removed. if remove remote rule, works correctly. also, if remote validation fails, works correctly. problem occurs first time validation run - after first time, works correctly.
what looks (notice error messages there, not red):
if remote validation fails, works correctly:
javascript:
$("#createuserform").validate({ rules: { username: { remote: "/users/usernameisfree" } }, messages: { username: { remote: "username taken" } } }); //bootstrap styling errors $.validator.setdefaults({ highlight: function (element) { $(element).closest('.form-group').addclass('has-error'); }, unhighlight: function (element) { $(element).closest('.form-group').removeclass('has-error'); }, errorelement: 'span', errorclass: 'help-block', errorplacement: function (error, element) { if (element.parent('.input-group').length) { error.insertafter(element.parent()); } else { error.insertafter(element); } } });
html:
<div class="modal fade" id="createusermodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span></span>x</button> <h4 class="modal-title">create user</h4> </div> <form id="createuserform"> <div class="modal-body"> <div class="row"> <div class="col col-lg-12"> <div class="form-group"> <label>full name</label> <input type="text" name="name" class="form-control" required /> </div> </div> <div class="col col-lg-12"> <div class="form-group"> <label>school</label> <input type="text" name="school" class="form-control" required /> </div> </div> <div class="col col-lg-12"> <div class="form-group"> <label>username</label> <input type="text" name="username" class="form-control" value="generateddefault" required /> </div> </div> </div> </div> <div class="modal-footer"> <div class="btn-group pull-right"> <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">cancel</button> <button type="submit" id="createuserbtn" class="btn btn-info btn-flat">create user</button> </div> </div> </form> </div> </div> </div>
Comments
Post a Comment