JSF 2 验证以及丰富面孔中的 tabbedPanel 导致问题

Question

我正在使用 JSF 2.0 和丰富的面孔 4.2.3 开发一个 Web 应用程序。 我有一个页面，其中选项卡式面板相互嵌套，如下所示（代码在最后给出）。

我面临以下问题：

当一个选项卡被点击时，验证被触发并且第二个选项卡不被显示（因为文本字段没有设置任何值，验证失败）。 这是因为，当单击选项卡时，会触发 POST 请求，从而调用验证。 我该如何解决这个问题？

其中一个选项可能是将 switchType 更改为“client”。但是当点击一个标签时，更新的数据将不会显示。

<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

你已经在上面做了一件非常错误的事情，那就是嵌套<h:form/>s。表单嵌套在 HTML 和扩展 JSF 中都是非法的。即使您的观点没有其他问题，仅此构造就会让您在以后非常头疼。见this和this答案

在标签点击时触发验证，因为在一天结束时，您的所有组件都集中在同一个 <h:form/> 中。因此，该表单中的任何操作都将提交其中的所有组件。您必须摆脱最顶层的<h:form/> 并相应地重组您的组件。此外，您可以使用<a4j:commandButton process="someId" ajaxSingle="true"/> 选择性地处理视图组件，指定您要提交处理的组件的clientId