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

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.