jsf navigation between tabs during textfield validation

Question

I'm quite new to JSF and I have run into a strange issue, not sure how to solve it.

I have multiple tabs in a screen and in one of the tab i have text fields, drop downs etc. All the text fields and drop downs have required="true" set.

Because of this validation, when I try to navigate to another tab without entering or selecting a value, I'm not able to navigate and it displays the validation message ( value is required ).

But I have a save button in the tab, the validation should trigger only when I click the save button, not during the Tab switch/navigation. Between the validation works when I click the save button, all I want is the validation should not get triggered when I switch over to a different tab.

This validation is not allowing me to switch over to different tabs and not sure why this validation is triggered when I switch tabs.

Could any one please suggest a solution for my issue.

---

Update : here are the changes I made based on the answer of CycDemo:

<h:tab name="First Tab" accessKey="s">
    <h:panelGroup >
    <h:dataTable id="firstTable" styleClass="dataTableEx" headerClass="headerClass"
                footerClass="footerClass" rowClasses="rowClass1,rowClass2"
                columnClasses="columnClass1" value="#{clientProductCRUDBean.model}"
                var="item" border="1"  cellpadding="2" cellspacing="0" >

                <!-- this for the incoming originator type dropdown field -->

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="firstDropDown" />
                    </f:facet>
                     <h:selectOneMenu id="firstDropDown"  
                                required="true" requiredMessage="required field" immediate="true" >
                            <f:selectItem itemLabel="--Select--" itemValue="#{null}" />
                            <h:message for="firstDropDown" errorClass="generalErrorText"/>
                    </h:selectOneMenu>  
                </h:column>                                 


                <!-- this for the outgoing originator text field -->

                <h:column >
                    <f:facet name="header">
                        <h:outputText value="firstTextField"/>
                    </f:facet>
                    <h:inputText id="firstTextField"
                    required="true" validatorMessage="Max Length 20" requiredMessage="required field" immediate="true" >
                    <f:validateLength maximum="20"/>
                    <h:message for="firstTextField" errorClass="generalErrorText"/>
                    </h:inputText>
                </h:column>

            <!-- this for the replace or randomise radio buttons text field -->

                    <!-- this for the operators selection drop down-->

                </h:dataTable>
    </h:panelGroup>

    <h:panelGroup style="padding: 1px;  margin-top: 5px;" >
                <h:commandButton id="firstSaveButton" styleClass="commandButton"  value="Save" />
                <h:commandButton id="firstSaveCancel" styleClass="commandButton" value="Cancel" immediate="true"/>
    </h:panelGroup>
    <br />
</h:tab>

It still invokes the validation.

Answer 1

If you would like to switch/navigation without validation process, you have to use immediate="true" in your action component.

Let's say, You have as below.

<h:commandButton value="Save" />
<h:commandButton value="NextPage" immediate="true"/>

When you click Save button, validation process will be work. But, NextPage is clicked validation process will be overcome.

Note If there are immediate="true" input components, even if you click NextPage button, the validation process will be perform for that component.

Example

<h:inputText id="name" value="#{...}" immediate="true" required="true">
<h:commandButton value="Save" />
<h:commandButton value="NextPage" immediate="true"/>

if you click NextPage button, the validation process of <h:inputText id="name"...> will be perform. You might have a question.Why they do like that? The answer is you have to learn JSF Life Cycle .

Answer 2

Use a <rich:tabPanel and change the switchType to client. Then use <rich:tab> s inside it.

<rich:tabPanel switchType="client">
<rich:tab>
.............
</rich:tab>
</rich:tabPanel>