1

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

<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>
4

2 回答 2

1

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

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

可以使用 和 上的各种属性更改h:messages样式h:message。有一些属性可以直接设置样式或为每个消息严重性（信息、警告、错误、致命）设置一个样式类。样式可以这样设置：

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

样式类的“重用”没有标准方法。您必须将它们放在每个标签上而无需修改。但是有几种方法可以实现：

  1. 为具有默认样式的消息构建复合组件
  2. 替换消息组件的渲染器以支持默认样式
  3. 使用 PrimeFaces 之类的组件库
于 2013-04-13T08:58:07.520 回答
0

您可以使用消息，Primefaces 的咆哮。并且您可以获得 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 类或创建自己的组件。

于 2013-04-13T04:12:37.000 回答