Styling input component after validation failed

Question

How can I style a component after validation failed?

I have the following textfield:

Answer 1

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

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.

---

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.

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.

Answer 2

I tried the linked example and got the SystemEventListener.processEvent() to trigger when using

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

So i figured it has do with faces-config.xml. Specifying the primefaces InputText as source-class did the trick:

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

to use

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