Styling jQuery validation

Question

When I have this, the div, which just has text in it, uses all the horizontal width it can, so there's trailing width after the text, which I can tell from the background color.

    errorElement: "div",
    errorPlacement: function(error, element) {

            error.insertBefore("#zzz");

When I use this, the width is the same as the text contained, but I cannot get each individual error (span) to be on a separate line via display: block.

    errorElement: "span",
    errorPlacement: function(error, element) {

            error.insertBefore("#zzz");
            error.css("display", "block");

Is there another way to force a break on a span element?

Answer 1

Yo can have a span with the different background color inside a div for the block display.

Also, <li>

Answer 2

This worked for me. It's not exactly the best way, but if anyone has anything more maintainable, please let me know. I'm a bit peeved the display:block didn't work for the span. Oh well.

 errorElement: "div",
 errorPlacement: function(error, element) {

     error.insertBefore("#zzz");      

     if (error.text() == 'Password Required')
     {
          error.css("width", "135px");
     }
     else
     {
          error.css("width", "165px");
     }

Answer 3

Sorry I was confused by what you were looking for, but my comment above stands. Why not use html elements to force a line break rather than trying to shoehorn it into css? If you want each error span on a separate line, wrap it in a <p> or add a <br/>.

Something like this should work:

errorElement: "span",
errorPlacement: function(error, element) {
        error.wrap('<p>');
        // alternative:  error.append('<br/>');
        error.insertBefore("#zzz");

An li element instead of span would also be a good choice semantically, as @Victor suggests. (It is a list of errors, after all.) You would also need a <ul> enclosing the error section.