I need to do some basic validation on a form. The form data is broken up among 5 tabs, and the user should be able to submit the form from any tab. So far so good. If the user hasn’t filled in a field, or has entered invalid data I want to stay on the current tab, display an error message and cancel the tab switch.
I have tried the various events that I can find. Does anybody have any idea if this is possible and how I might achieve it? I would prefer to keep it on the client side in javascript if possible.
Using a code sample such as below.
<rich:tabPanel selectedTab="Info" switchType="client" contentClass="hz-record-tabpanel" ontabchange="doTabChange();" onbeforeitemchange="doTabChange();" onbeforetabchange="doTabChange();">
<rich:tab name="Info" label="Tab Label" onlabelclick="doTabChange();">
<ui:include src="info.xhtml" />
</rich:tab>
<rich:tab name="Officers" label="Officers" onlabelclick="doTabChange();" ontableave="doTabChange();">
<ui:include src="officers.xhtml" />
</rich:tab>
<rich:tab name="CardServices" label="Card Services" onlabelclick="doTabChange();">
<ui:include src="cardservices.xhtml" />
</rich:tab>
<rich:tab name="M2MLimits" label="M2M Limits" onlabelclick="doTabChange();">
<ui:include src="m2mlimits.xhtml" />
</rich:tab>
<rich:tab name="AccountServices" label="Account Services" onlabelclick="doTabChange();">
<ui:include src="accountservices.xhtml" />
</rich:tab>
</rich:tabPanel>
Any Ideas?
We eventually moved to Richfaces 4 (4.2) and I am successfully using
itemchangeandbeforeitemchangeevents.
These events fire twice (haven’t figured that one out yet) so you don’t want anything too intensive in the handler code.
If
beforeitemchangereturns false (twice) then the tabpanel will not switch.I am using the
itemchangeevent to fire any extra javascript to format data, and place focus on the first input field in the form on that tab.