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): enter image description here

what should like: enter image description here

if remote validation fails, works correctly: enter image description here

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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -