jsf-2 - 验证失败后样式化输入组件

Question

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

我有以下文本字段:

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

我正在尝试在以下时间之后更改颜色:

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

被点击。

我找到了这个 site并尝试实现已在此处显示的方式。

这是我的课:

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 方法根本没有执行。

我做错了什么，我该如何实现？

Answer 1

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

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

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

顺便说一句，@ListenersFor (和 @ListenerFor )放错了地方。它不是那样工作的，它们被简单地忽略了。摆脱他们。另见 How to register a (Component)SystemEventListener for all UIInputs .

---

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

最好改用客户端方法。 JSF 实用程序库 OmniFaces提供 <o:highlight>组件就是为了这个目的。另见 the <o:highlight> tag documentation , the <o:highlight> showcase example和 the <o:highlight> source code .