Which component invoked bean method

Question

When a form is submitted and validation errors occur, I'd like to indicate the component that caused the validation error with a different style.
For example:
JSF page:
            <h:form id="form">
                <h:panelGrid columns="2">
                    <t:outputText value="Name"/>
                    <h:panelGroup>
                        <t:inputText value="#{UserBean.newUser.name}" id="name" required="true" style="#{UserBean.styleBorder}" />
                        <h:message for="name" style="color:red;text-decoration:overline" />
                    </h:panelGroup>
                    <t:outputText value="First name" />
                    <h:panelGroup>
                        <t:inputText value="#{UserBean.newUser.firstname}" id="firstname" required="true" />
                        <h:message for="firstname" style="color:red;text-decoration:overline" />
                    </h:panelGroup>
                    <h:outputText value="" />                  
                    <t:commandButton action="#{UserBean.addUser}" value="Add user" />
                </h:panelGrid>
            </h:form>UserBean code:
    public String getStyleBorder() {
        FacesContext context = FacesContext.getCurrentInstance();
        if (context.getMessages("form:name").hasNext() == true) {  //Er zijn messages aanwezig voor deze component
            return "border-style:solid;border-color:#FF0000";
        else {
            return "";
    }In this example, when the user didn't fill in the name component correctly, a red border is drawed at the name-component.
In the context.getMessages method in the UserBean whoever, I need to hardcode the id of the component that needs to be checked for validation errors.
Therefore, I would need a getStyleBorder method for each component of the form.
Like this:
JSF page:
            <h:form id="form">
                <h:panelGrid columns="2">
                    <t:outputText value="Name"/>
                    <h:panelGroup>
                        <t:inputText value="#{UserBean.newUser.name}" id="name" required="true" style="#{UserBean.styleBorderName}" />
                        <h:message for="name" style="color:red;text-decoration:overline" />
                    </h:panelGroup>
                    <t:outputText value="First name" />
                    <h:panelGroup>
                        <t:inputText value="#{UserBean.newUser.firstname}" id="firstname" required="true" style="#{UserBean.styleBorderFirstName}" />
                        <h:message for="firstname" style="color:red;text-decoration:overline" />
                    </h:panelGroup>
                    <h:outputText value="" />                  
                    <t:commandButton action="#{UserBean.addUser}" value="Add user" />
                </h:panelGrid>
            </h:form>UserBean code:
    public String getStyleBorderName() {
        FacesContext context = FacesContext.getCurrentInstance();
        if (context.getMessages("form:name").hasNext() == true) {  //Er zijn messages aanwezig voor deze component
            return "border-style:solid;border-color:#FF0000";
        else {
            return "";
    public String getStyleBorderFirstName() {
        FacesContext context = FacesContext.getCurrentInstance();
        if (context.getMessages("form:firstname").hasNext() == true) {  //Er zijn messages aanwezig voor deze component
            return "border-style:solid;border-color:#FF0000";
        else {
            return "";
    }This causes a lot of duplicate code.
Is it possible to have only 1 getStyleBorder method that can handle the style for every component in the form?
Is there a way to get the id of the component that invoked the getStyleBorder method?

Answer 1

I'd to implement a PhaseListener for that. Listen on the beforePhase of PhaseId.RENDER_RESPONSE, get all client IDs with facesmessages by FacesContext#getClientIdsWithMessages(), retrieve the appropriate UIComponent for the client ID by UIViewRoot#findComponent() and set its style.