验证失败后对输入组件进行样式设置 [英] Styling input component after validation failed

问题描述

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

How can I style a component after validation failed?

我有以下文本字段:

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

我正在尝试更改以下颜色:

I am trying to change the color after the:

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

被点击.

我已经找到了这个网站并尝试实现该方法已在此处显示.

I have found this site and tried to implement the way has been shown there.

这是我的课程:

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根本没有执行.

I was expecting that when the input field is invalid, for my case, blank, the css class ui-input-invalid will be added to the class attribute of the component. But it is not working. I fact the method processEvent is not executing at all.

我在做什么错了，我该怎么办?

What I am doing wrong and how can I achieve this?

推荐答案

您的具体问题是由于没有在完成Ajax请求时更新输入组件而引起的.您只在更新咆哮组件.因此，对输入组件的更改永远不会反映到客户端.

Your concrete problem is caused because you didn't update the input component on complete of the ajax request. You're only updating the growl component. So the changes to the input component are never reflected into the client side.

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

I suggest to just update the entire form as it might contain other input components which also needs to be highlighted:

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

顺便说一下，@ListenersFor(和@ListenerFor)在这里放错了位置.那样就行不通了，他们被无视了.摆脱它们.另请参见如何为所有UIInput注册(Component)SystemEventListener .

By the way, the @ListenersFor (and @ListenerFor) is misplaced here. It doesn't work that way and they're plain ignored. Get rid of them. See also How to register a (Component)SystemEventListener for all UIInputs.

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

Unrelated to the concrete problem, this SystemEventListener approach to highlight failed input components is flawed. It will fail when the input component is inside an iterating component such as <ui:repeat> or <h:dataTable>. It would highlight the input component in all rows even when only one of them has failed.

最好采用客户端方法. JSF实用程序库 OmniFaces 为此提供了<o:highlight>组件.另请参见 <o:highlight>标签文档，

Better go for a client side approach instead. The JSF utility library OmniFaces offers the <o:highlight> component for exactly this purpose. See also the <o:highlight> tag documentation, the <o:highlight> showcase example and the <o:highlight> source code.

这篇关于验证失败后对输入组件进行样式设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！