javascript - Styling jQuery Validation error messages -

i've created form page using jade , being validated using jquery validation plugin.

i style error messages, using bootstrap. use .has-error class , .has-success class. these have used on parent div class .form-group. more details here.

i have been playing around errorclass, errorelement, errorcontainer, ... options, can't seem find right combination. missing here?

this form:

form#signupform.form-horizontal(method='post', action='')      .form-group         label.col-sm-2.control-label(for='firstname')              | first name:         .col-sm-10             input#firstname.form-control(type='text', placeholder='john',name='firstname')      .form-group         label.col-sm-2.control-label(for='lastname')             | last name:         .col-sm-10             input#lastname.form-control(type='text', placeholder='doe', name='lastname')      .form-group         .col-sm-2.control-label             button.btn.btn-default(type='submit')                 | submit 

i tried in validation code:

errorelement: 'div', errorclass: 'has-error', 

the option you're looking errorplacement, combined success option:

customize placement of created error labels. first argument: created error label jquery object. second argument: invalid element jquery object.

for example, can this:

$("#signupform").validate({   errorplacement: function(error, element) {     element.closest("div.form-group").removeclass('has-success').addclass('has-error');   },   success: function(error, element) {     $(element).closest("div.form-group").addclass('has-success').removeclass('has-error');   } }); 

edit: noticed 1) older versions of success function not passed element @ all, , in newer ones, it's domelement, not jquery object, must wrapped in $(element).

working example: http://jsfiddle.net/ryleyb/7epd44de/