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将被添加到组件的class属性中。但它没有用。事实上，方法processEvent根本没有执行。

我做错了什么，我怎样才能做到这一点？

Answer 1

您的具体问题是由于您在完成ajax请求时未更新输入组件而导致的。您只是更新了growl组件。因此，对输入组件的更改永远不会反映到客户端。

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

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

Answer 2

我尝试了链接的示例并在使用时触发了SystemEventListener.processEvent（）

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

所以我认为它与faces-config.xml有关。将primefaces InputText指定为source-class可以解决问题：

<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"/>

验证失败后的样式输入组件

2 个答案: