验证失败后的样式输入组件 [英] 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" />

我正在尝试更改颜色:

<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 中将其注册为:

I am registering it in faces-config.xml as:

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

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)在这里放错了地方.它不会那样工作，而且它们显然被忽略了.摆脱他们.另请参阅如何为所有 UIInputs 注册(组件)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 方法是有缺陷的.当输入组件位于诸如 或 之类的迭代组件内时，它会失败.它会突出显示所有行中的输入组件，即使其中只有一个失败.

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 正是为此目的提供了 组件.另请参阅 标签文档、 展示示例 和 源代码.

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屋！