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/
Comments
Post a Comment