jsf requiredMessage css

Question

我想把样式应用到我的验证消息中，因为到目前为止，它们默认是红色的，并应用到页面的左下角。例如，当用户在一个空的用户名字段中输入时，会出现"用户名是必需的"消息，但是它前面有一个项目符号，并且是红色的。我还在一些输入字段上使用了自定义验证器。

<h:panelGrid class="grid" columns="2" id="regPanel">
        <h:form>
            <h:outputLabel class="outputLabel" value="Username"/>
            <h:inputText class="inputText" id="userNameInputText"
                         value="#{regBean.userName}" required="true"
                         requiredMessage="Username is required"  >
            </h:inputText>  .... more form inputs with required fields
        </h:form>
    </h:panelGrid>

Answer 1

首先，您必须在您想要呈现消息的视图中放置h:messages或h:message标记。使用h:messages，页面的所有消息都呈现在一个中心列表中。使用h:message，您可以像这样呈现连接到一个组件的消息:

<h:inputText id="long" value="#{bean.longValue}"/>
<h:message for="long"/>

样式可以通过h:messages和h:message上的各种属性进行更改。有一些属性可以直接设置样式，或者为每个消息严重性(info、warn、error、fatal)设置样式类。样式可以这样设置:

<h:message for="long" warnStyle="color: green" infoStyle="color: blue"
    errorClass="errorMsg" fatalClass="fatalMsg"/>

没有标准的方式来"重用"样式类。你必须把它们不加修改地放在每个标签上。但是有几种方法可以实现:

1. 为具有默认样式的消息构建复合组件
2. 替换消息组件的渲染器以支持默认样式
3. 使用像PrimeFaces
这样的组件库

Answer 2

你可以使用消息，咆哮的主要面孔。你可以获得验证消息的CSS类并重写它。例如:我修改了

的css

<style type="text/css">
                .ui-growl-image.ui-growl-image-error{
                    background-image: none !important;
                    background-color: navy;
                }
            </style>

演示:http://www.primefaces.org/showcase/ui/messages.jsf

如果您使用JSF的默认消息，您必须为每个组件添加css类或创建您自己的组件。