Question

I have a form in which validation error message needs to be displayed below the input elements. The error needs to be highlighted by showing an error bubble around the error message and the input text.

To achieve this, I need to check for the existence of h:messages for individual elements.
I am able to check for the existence of global error messages as follows

<h:panelGroup rendered="#{not empty facesContext.messages}"> 
</h:panelGroup>

How I can check the same for specific client id (say first name). So something like

faceContent.messages("creditCardNo")

A solution I have currently is to create a custom resolver but was wondering if there is a better solution.

Answer 1

The error needs to be highlighted by showing an error bubble around the error message …

Just use <h:message> with a styleclass wherein you define the desired style.

<h:inputText id="foo" />
<h:message for="foo" styleClass="error" />

with

.error {
    border: 1px solid red;
    background: pink;
}

---

…and the input text.

Just check if UIInput#isValid() is true. Since JSF 2.0 the current component is available by implicit EL variable #{component}.

<h:inputText styleClass="#{component.valid ? 'none' : 'error'}" />

---

As to the actual question about checking if there’s a message for a certain client ID, then you may find this answer interesting. But I don’t think that this is applicable in your particular case.

---

Update: as per the comments, you seem to want to style the containing component instead of the invididual components. In that case, do as follows:

<h:panelGroup styleClass="#{foo.valid ? 'none' : 'error'}">
    <h:inputText id="foo" binding="#{foo}" />
    <h:message for="foo" />
</h:panelGroup>