JSF 2.0 checking by EL if components are valid inside composite component

Question

there is an example what I want to achieve inside my JSF composite component:

<h:inputText id="name" value="#{cc.attrs.value.name}" styleClass="#{(component.valid) ? 'required' : 'required invalid'}" validatorMessage="bad name" requiredMessage="name required" immediate="true" required="true">
    <f:validateRegex pattern="^[\p{L}' ]{2,19}$" />
    <f:ajax event="blur" execute="name" render="name testPanel" immediate="true"/>
</h:inputText>

<h:inputText id="surname" value="#{cc.attrs.value.surname}" styleClass="#{(component.valid) ? 'required' : 'required invalid'}" validatorMessage="bad surname" requiredMessage="surname required" immediate="true" required="true">
    <f:validateRegex pattern="^[\p{L}' ]{2,19}$" />
    <f:ajax event="blur" execute="name" render="surname testPanel" immediate="true"/>
</h:inputText>

<h:panelGroup id="testPanel" styleClass="#{(!name.valid || !surname.valid) ? 'warning' : 'none'}">
    <h:message id="msgName" for="name" showSummary="true" showDetail="false" />
    <h:message id="msgSurname" for="surname" showSummary="true" showDetail="false" />
</h:panelGroup>

The problem is how to evaluate if name or surname are valid/invalid at the 'testPanel'. I want both messages 'msgName' and 'msgSurname' to be wrapped with styled span (html output) that would be not present if there are no error messages for 'name' or 'surname'.

Any help appreciated :)

Answer 1

Bind the components to the EL scope using binding attribute:

<h:inputText binding="#{name}" ... />
<h:inputText binding="#{surname}" ... />

This way your EL attempt in the styleClass attribute will work.