Change class of div based on a field's validation result - forms

Question

I want to wrap fields in a <div class="validation-error"> when they have validation errors, and in plain <div>s otherwise:
Validation Error:
<div class="validation-error">
<sf:input path="title" cssErrorClass="validation-error"/>
<sf:errors path="title" cssErrorClass="validation-error" />
</div>
No Validation Error:
<div>
<sf:input path="title" cssErrorClass="validation-error"/>
<sf:errors path="title" cssErrorClass="validation-error" />
</div>
How can I check that title has an error or not?

Answer 1

You shouldn't apply validation-error class to whole <div> element of your input. I don't think that <errors> tag was meant to work like that.
What you could do is very simple and neat solution. Simply display error message with all proper classes and styles applied to it or don't display it at all. For instance:
<tr>
<td><label>Username</label></td>
<td><form:input id="username" path="nickname" /></td>
<td><span id="usernameError" class="error"><form:errors path="nickname" /></span></td>
</tr>
When there is no error message, appropriate cell will be left blank and user won't see anything. However, if the message will be displayed - it will have proper styling thanks to class="error" notation in mine example.
Ohh, and you can use divs, spans or any other elements if you wish. I just tend to use table for forms.