Question

In my application I’ve created a wizard. It seems like I can not switch panels because validation fails on a non displayed panel.

The wizard has this layout:

<rich:modalPanel>
    <f:facet name="header">
        <h:outputText value="#{messages['motivation.title']}" />
    </f:facet>
    <h:messages />
    <rich:togglePanel id="motivationTogglePanel" switchType="ajax" initialState="wiz1" rendered="#{motivationController.enabled}">
        <f:facet name="wiz1">
            <f:subview id="wiz1sub"> 
                <rich:toggleControl value="next" switchToState="wiz2"></rich:toggleControl>
            </f:subview>
        </f:facet>
        <f:facet name="wiz2">
            <f:subview id="wiz2sub"> 
                <h:selectManyCheckbox id="checkBoxList1" required="true" value="#{controller.selectedValue}" layout="pageDirection">
                    <f:selectItems value="#{controller.options}"></f:selectItems>
                </h:selectManyCheckbox>
            </f:subview>
        </f:facet>   
</rich:modalPanel>

The modalPanel shows correctly starting with the wiz1 panel. Now when a user clicks the toggleControl nothing happens. If I remove the required field from the component then the switching works.

How can I do a proper validation of the currently displayed components only?

Answer 1

I’ve replaced the togglePanel by normal panels and reRender the correct panel using a controller property.