Reply to comment

Designing Field Error Message in Struts 2

The struts 2 tag <s:fielderror /> will generate the following html tags when field error occur (my example if for age and birthDate field):

<ul>
    <li><span class="errorMessage">Age is invalid</span></li>
    <li><span class="errorMessage">Birthdate is invalid</span></li>
</ul>

To achieve an awesome design for the field error, i put the <s:fielderror /> inside a <div> tag w/ an id.

<div id="fieldError">
    <s:fielderror />
</div>

Then looking at the generated html, we can use CSS for the desired design for this. Here's my css for this.

#fieldError li span{
    font-family: sans-serif;
    font-size: 12px;
    color: #d00000;
}
#fieldError li, #successMessage li{
    margin-top: 3px;   
}
#fieldError ul{
    margin: 10px;
    border-bottom: 3px #de7a7b solid;
    border-top: 3px #de7a7b solid;
    background-color: #e6c0c0;
    list-style:none;
    height: auto;
    padding-bottom: 6px;
    margin-bottom: 0px;
}

output:

struts 2 design for field error

Reply

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.