如何在條帶框架中更改錯誤消息的顏色

Question

我試圖更改錯誤消息的顏色。 我正在使用Stripes驗證。如果驗證失敗，我發送錯誤消息。 我想要它是紅色的。但它顯示為黑色。 如何在Stripes框架中更改錯誤消息的顏色。

以下是我的嘗試。

        <div class="item">

            <stripes:errors />
            <stripes:form name="home"action="/home.action">
                //contents
              </stripes:form>
        </div>

Answer 1

正如Vinoth所說，您可以應用CSS類來更改錯誤消息的外觀。 除此之外，還可以通過編輯StripesResources.properties來完全自定義Stripes消息。

在這里，您可以使用標記和CSS類甚至內聯樣式准確定義消息的外觀。

# Resource strings used by the <stripes:errors> tag when there are no nested tags
stripes.errors.header=<div class="my-error-wrapper"><h4>Ooops... some things went awfully awry:/h4><ol>
stripes.errors.beforeError=<li><i class="fa fa-warning"></i>&nbsp;
stripes.errors.afterError=</li>
stripes.errors.footer=</ol></div>

# Resource strings used by the <stripes:errors> tag when displaying errors for a
# specific field (e.g. <stripes:errors field="password"/>). If not supplied the
# values above will be used instead.
stripes.fieldErrors.header=
stripes.fieldErrors.beforeError=<span class="my-error-inline"><i class="fa fa-warning"></i>&nbsp;
stripes.fieldErrors.afterError=</span>
stripes.fieldErrors.footer=

# Resource strings used by the stripes:messages tag
stripes.messages.header=<div class="my-message-wrapper"><ul>
stripes.messages.beforeMessage=<li>
stripes.messages.afterMessage=</li>
stripes.messages.footer=</ul></div>

正如你所看到的，你可以添加更多奇特的東西，比如FontAwesome圖標（承認，這比OP要求的要多一點）。

Answer 2

使用選擇器指定錯誤類。 這將全局錯誤樣式應用於輸入字段，

input.error, textarea.error {
    color: red;
    background-color: yellow;
}

input.error[type="radio"], input.error[type="checkbox"], select.error {
    background-color: white;
    border: 2px solid red;
}

閱讀條紋手冊以獲取更多信息。