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

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 :)