Question

I am developing a web app with JSF 2.0 and rich faces 4.2.3.
I have a page with tabbed panels nested inside each other like below (code is given at the end).

I am facing following issue :

When a tab is clicked, validation gets fired and second tab doesn’t get displayed (since text fields don’t have any value set, validation fails).
It is because, when a tab is clicked, POST request is fired causing validation to invoke.
How can I get around this?

One of the option could be to change the switchType to “client”. But then updated data will not be displayed when a tab is clicked.

<h:form>    
    <rich:tabPanel switchType="client">

        <rich:tab header="UserManagement">  
             <rich:tabPanel switchType="client">
                    <rich:tab header="AddUser">

                     <h:form>                       
                         <h:panelGrid id="addUserForm" columns="3">

                                Enter Name : 
                                <h:inputText id="name" value="#{userBean.name}"
                                    required="true" requiredMessage="User Id Required.">
                                </h:inputText>
                                <h:message for="name"></h:message>

                                Enter passWord : 
                                <h:inputText id="passWord" value="#{userBean.passWord}" required="true" requiredMessage="PassWord Required.">                    
                                </h:inputText>
                                <h:message for="passWord"></h:message>

                                Roles : 
                                 <h:selectOneMenu id="roles" value="#{userBean.roleId}">
                                                <f:selectItems  value="#{userBean.roles}"/>
                                </h:selectOneMenu>      
                                <h:message for="roles"></h:message>

                                <h:commandButton action="#{userBean.addUser}"
                                                    value="Add User">
                                      <f:ajax render="addUserForm" execute="@form"></f:ajax>
                                </h:commandButton>  
                        </h:panelGrid>
                    </h:form> 

                    </rich:tab>
                    <rich:tab header="EditUser"> 

                        <h:form>

                            <h:panelGrid id="editUserForm" columns="3">

                                    Enter passWord : 
                                    <h:inputText id="passWord" value="#{userBean.passWord}" required="true" requiredMessage="PassWord Required.">                    
                                    </h:inputText>
                                    <h:message for="passWord"></h:message>

                                    Roles : 
                                    <h:selectOneMenu id="roles" value="#{userBean.roleId}">
                                                    <f:selectItems  value="#{userBean.roles}"/>
                                    </h:selectOneMenu>      
                                    <h:message for="roles"></h:message>

                                    <h:commandButton action="#{userBean.editUser}"
                                                        value="Edit User">
                                          <f:ajax render="editUserForm" execute="@form"></f:ajax>
                                    </h:commandButton>
                            </h:panelGrid>  
                        </h:form>

                    </rich:tab>                          
             </rich:tabPanel>

        </rich:tab>     

        <rich:tab header="DeviceManagement">
        </rich:tab>     

    </rich:tabPanel>
</h:form>

Answer 1

You’re already doing one thing very wrong up there, which is nesting <h:form/>s. Form nesting is illegal in both HTML and by extension JSF. even if nothing else were wrong with your view, that construct alone will give you serious headaches later on. See this and this answer

Validation is being triggered on tab click because, at the end of the day, all your components are lumped within the same <h:form/>. As a result, any action within that form will submit the entirety of all the components in there. You have to get rid of the topmost <h:form/> and restructure your components accordingly. Additionally, you may selectively process view components with <a4j:commandButton process="someId" ajaxSingle="true"/>, specifying the clientId of the components you want to submit for processing