Question

I have an extremely basic example of this here. To replicate, try submitting the form, it will then alert you that the field is required. Then fill in some text, then erase all the text. You will see the error message jump down to the next line.

After inspecting with Firebug it shows that the plugin is adding style="display: block" inline on the element. How can I prevent any inline styles from being generated on the element? I know you can modify the .error class fro style, however the inline style it applies obviously trumps the applied class.

Answer 1

Adding style="display: block" via JavaScript is the only way to dynamically show and hide elements at run time. This is not really so bad as most inline styles. It’s the same thing that happens when you call $("#myElement").show() in normal jQuery.

Edit: to follow up on getting the behavior you want, I went and edited your jsBin; if I did it right, the new version should be here.

It became clear that the problem was that the behavior of this.defaultShowErrors() was to use jQuery’s .show() method on the error list, which (as discussed above and in the comments) in this case will set an inline display: block style. Since we want display: inline, we need to modify showErrors like so:

showErrors: function (errorMap, errorList) {
    this.defaultShowErrors();
    $.each(errorList, function (i, error) {
        $(error.element).css("display", "inline");
    });
}

This way, whenever the errors are hidden, then shown again, our custom showErrors function will trigger. They’ll get set to display: block momentarily by this.defaultShowErrors(), but then we’ll fix that and set them to display: inline.