jQuery Validation displays errors as inline by default, need to change this to inline-block

Question

I am using the jQuery Validation Plugin

How do I change the generated error messages display value to inline-block when not hidden?

I have tried with CSS but the jQuery overwrites this.

Answer 1

I ran into this and couldn't use CSS as jQuery is using the show() and hide() methods on the error element (which set "display:block;" inline) after initial creation. Instead you can use the validate plugin's highlight and unhighlight methods to change the inline css.

    errorElement: 'em',

highlight: function(element, errorClass) {
    $(element).addClass(errorClass); // good for changing field backgrounds
    $(element).next('em').css('display','inline'); // keeps error message layout clean
},

unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass); // good for changing field backgrounds
        $(element).next('em').css('display','none'); // keeps error message layout clean
},

Answer 2

Use the errorClass option to specify the class assigned to error messages and error elements:

$(".selector").validate({
   errorClass: "invalid"
})

<style type="text/css">
  .invalid {
    display: inline-block !important;
  }
</style>

See the documentation for validator options:

http://docs.jquery.com/Plugins/Validation/validate#options