1 Reply Latest reply on Feb 17, 2011 6:20 AM by jolacitrouille

    AjaxValidator updating TabPanel style

    jolacitrouille Newbie

      Hi guys,


      I am facing a little problem using <rich:ajaxValidator/>.. Basically I have a couple of fields inside 2 tabs and some of these fields have an ajaxValidator associated to them which checks the Hibernate Validator constraints that I set. I used a <rich:message> to dispay the validation message and everything works fine. Now, I would like to change the corresponding tab color when a field doesn't pass the validation. To do so I used an actionListener on my <rich:ajaxValidator/> which goes through the components tree to the closest HtmlTab and set its style. Here is my code:


      /* JSF page */

      <h:panelGroup id="tabsContainer">

        <rich:tabPanel switchType="client">


          <rich:tab label="1">

            <h:inputText value="Name" id="nameField" >

              <rich:ajaxValidator event="onblur" reRender="tabsContainer" ajaxListener="#{myBean.ajaxValidatorListener}" />




          <rich:tab label="2">






      /* myBean */

      private static UIComponent getParentHtmlTab(UIComponent component) {

           if (component instanceof HtmlTab){

                return component;



                    UIComponent htmlTabComponent = null;

                    if (component.getParent() != null) {

                        htmlTabComponent = getParentHtmlTab(component.getParent());



                    return htmlTabComponent;



      public void ajaxValidatorListener(AjaxEvent event) {

           FacesContext f = FacesContext.getCurrentInstance();


           Iterator<String> itClientIds = f.getClientIdsWithMessages();

           while (itClientIds.hasNext()) {

                                   UIComponent component = f.getViewRoot().findComponent(itClientIds.next());

                                   UIComponent htmlTab = getParentHtmlTab(component);

                                   if (htmlTab != null) {

                                       ((HtmlTab) htmlTab).setStyle("background-color: red;");






      Unfortunately this doesn't work, because the reRender <rich:ajaxValidator/> doesn't seem to be processed.. However, if I add a <a4j:commandButton/> with a reRender on my tabsContainer, the <h:panelGroup/> is updated and becomes red.


      <a4j:commandButton value="ReRender" reRender="tabsContainer" />


      Does somebody see why my reRender isn't processed? Or has a solution to my general problem (change tab color when validation fails)?