2

验证失败后如何设置组件样式？

我有以下文本字段：

<p:inputText id="username" value="#{authController.username}" autocomplete="off" required="true" />

我试图在以下之后更改颜色：

<p:commandButton id="submit" value="Login" actionListener="#{authController.login}" update=":growl" />

被点击。

我找到了这个站点并尝试实施那里显示的方式。

这是我的课：

public class RequiredFieldValidationListener implements SystemEventListener {

    public boolean isListenerForSource(Object source) {
        return true;
    }

    public void processEvent(SystemEvent event) throws AbortProcessingException {
        if (event.getSource() instanceof UIInput) {
            UIInput source = (UIInput) event.getSource();

            if (!source.isValid()) {
                String originalStyleClass = (String) source.getAttributes().get("styleClass");
                source.getAttributes().put("data-originaStyleClass", originalStyleClass);
                source.getAttributes().put("styleClass", originalStyleClass + " ui-input-invalid");
            } else {
                String originalStyleClass = (String) source.getAttributes().get("data-originaStyleClass");
                source.getAttributes().put("styleClass", originalStyleClass);
            }
        }
    }
}

我将其注册faces-config.xml为：

<application>
    ---

    <system-event-listener>
        <system-event-listener-class>com.edfx.adb.web.event.RequiredFieldValidationListener</system-event-listener-class>
        <system-event-class>javax.faces.event.PostValidateEvent</system-event-class>
        <source-class>javax.faces.component.html.HtmlInputText</source-class>                       
    </system-event-listener>

</application>

我也尝试过使用

@ListenersFor({ @ListenerFor(sourceClass = HtmlInputText.class, systemEventClass = PostValidateEvent.class) })
public class RequiredFieldValidationListener implements SystemEventListener {

}

我期待当输入字段无效时，对于我的情况，空白，css类 ui-input-invalid 将被添加到组件的类属性中。但它不起作用。我实际上该方法processEvent根本没有执行。

我做错了什么，我该如何做到这一点？

4

2 回答 2

4

您的具体问题是因为您没有在完成 ajax 请求时更新输入组件。您只是在更新咆哮组件。因此输入组件的更改永远不会反映到客户端。

我建议只更新整个表单，因为它可能包含其他需要突出显示的输入组件：

<p:commandButton ... update="@form" />

顺便说一下，@ListenersFor(and @ListenerFor) 在这里放错了位置。它不是那样工作的，它们被完全忽略了。摆脱他们。另请参阅如何为所有 UIInputs 注册（组件）SystemEventListener。

与具体问题无关SystemEventListener，这种突出显示失败输入组件的方法是有缺陷的。当输入组件位于迭代组件（例如<ui:repeat>或）内时，它将失败<h:dataTable>。即使其中只有一个失败，它也会突出显示所有行中的输入组件。

最好改用客户端方法。JSF 实用程序库OmniFaces<o:highlight>正是为此目的提供了该组件。另请<o:highlight>参阅标签文档、展示<o:highlight>示例和源代码。<o:highlight>

于 2012-12-09T13:52:26.950 回答
1

我尝试了链接的示例，并在使用时触发了 SystemEventListener.processEvent()

<h:inputText ... required="true"/>

所以我认为它与 faces-config.xml 有关。将 primefaces InputText 指定为源类就可以了：

<application>
    <system-event-listener>
        <system-event-listener-class>RequiredFieldValidationListener</system-event-listener-class>
        <system-event-class>javax.faces.event.PostValidateEvent</system-event-class>
        <source-class>org.primefaces.component.inputtext.InputText</source-class>
    </system-event-listener>
</application>

使用

<p:inputText ... required="true"/>
于 2012-12-09T07:33:01.823 回答