JSF：检查存在的更好方法<h:message for=“id”/>

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

Answer 2

I use bootstrap and also needed this... solved it by creating a Custom component wrapper.

<composite:interface>
    <composite:attribute name="casoCustomFieldValue" required="true" />
    <composite:attribute name="casoOpen" default="true" />
</composite:interface>

<composite:implementation>

    <h:panelGroup styleClass="#{not empty facesContext.getMessageList(''.concat(cc.clientId).concat(':valortext')) ? 'form-group has-error' : 'form-group'}"
                  rendered="#{cc.attrs.casoCustomFieldValue.customField.fieldTypeId.fieldTypeId eq 'TEXT'}" >
        <p:inputText id="valortext" value="#{cc.attrs.casoCustomFieldValue.valor}" styleClass="form-control input-sm"
                 required="#{cc.attrs.casoCustomFieldValue.customField.required}" requiredMessage="Se necesita un valor." disabled="#{not cc.attrs.casoOpen}"/>
        <h:panelGroup rendered="#{not empty facesContext.getMessageList(''.concat(cc.clientId).concat(':valortext'))}" styleClass="help-block">
            <h:message for="valortext" />
        </h:panelGroup>
    </h:panelGroup>



</composite:implementation>