I have two panels. First panel(panel-1) has a checkbox. When user checks/unchecks the checkbox, second panel(panel-2) will show/hide. There is one required input text field on panel-2.

Here is my code:

<rich:panel header="panel-1">
 <a4j:region>
 <tr:selectBooleanCheckbox value="#{bean.isAddingNewUser}" text="Add New User">
 <a4j:support event="onclick" reRender="newUserPanel" limitToList="true" ajaxSingle="true"/>
 </tr:selectBooleanCheckbox>
 </a4j:region>
</rich:panel>

<a4j:outputPanel id="newUserPanel">
 <rich:panel header="panel-2" rendered="#{bean.isAddingNewUser}">
 <tr:inputText label="Name:" value="#{bean.name}" required="true"/>
 </rich:panel>
</a4j:outputPanel>

<tr:panelButtonBar>
 <tr:commandButton text="Save" action="#{controller.save}" blocking="true"/>
</tr:panelButtonBar>

The show/hide of panel-2 can be perfectly controled by the checkbox of panel-1.

The problem is:

If the initial value of "bean.isAddingNewUser" is FALSE, which causing the panel-2 is not rendered when the whole page is loaded at first time. Then bring up panel-2 by clicking the checkbox. Click "save" button without putting anything into the required field on panel-2. No validation warning shows up!! The form is fasely submitted with empty required field!!

If the initial value of "bean.isAddingNewUser" is TRUE, which causing panel-2 is rendered when the whole page is loaded, then it works as expecting.

Can anybody help me out on this?