JSF : Better way to check for existence of <h:message for="id"/>

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 ? 'error' : 'none'}" />

---

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 ? 'error' : 'none'}">
    <h:inputText id="foo" binding="#{foo}" />
    <h:message for="foo" />
</h:panelGroup>