JSF 2 validation alongwith tabbedPanel in rich faces causing issue

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>

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

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

edited May 23 '17 at 12:30

Community

1
1

answered Jan 12 '13 at 05:34

kolossus

19,953
3
45
94

If I remove the from the top , a warning is displayed on the page when the page is accessed through a browser(mozilla ) like below : The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within .Do I always need to enclose rich:tabPanel inside a form element ? – Atul Jan 13 '13 at 09:41
@Atul, the rule of thumb in JSF is, if it doesn't submit anything for server-side processing, you don't need to wrap it in a form. That message you can [(in theory)ignore](http://stackoverflow.com/q/12749850/1530938). What you can do in this case is wrap the top level ``s in individual ``s and set the `javax.faces.PROJECT_Stage` context-param (in your web.xml) to "production" (this takes care of that warning) – kolossus Jan 13 '13 at 14:43
,setting javax.faces.PROJECT_Stage to production removed the warning.One question regarding your suggestion : wrap the top level s in individual ,why is this necessary ? In the code I have pasted above , h:form exists inside rich:tab and it works perfectly.(not outside of rich:tab).If I include top level tab inside h:form, both the child tabs will be inside the same h:form (AddUser and EditUser). – Atul Jan 14 '13 at 08:36
@Atul, in retrospect, you're right, all you need do is get rid of the topmost level form. There's no need for the top-level tab forms – kolossus Jan 16 '13 at 07:05

JSF 2 validation alongwith tabbedPanel in rich faces causing issue

1 Answers1