如何在RichFaces 3.3.x中取消选项卡面板切换

Question

我需要对表单进行一些基本验证。表单数据分为 5 个选项卡，用户应该能够从任何选项卡提交表单。到目前为止，一切都很好。如果用户没有填写字段，或者输入了无效数据，我想保留在当前选项卡上，显示错误消息并取消选项卡切换。

我尝试了我能找到的各种活动。有人知道这是否可能以及我如何实现它吗？如果可能的话，我更愿意将其保留在客户端的 JavaScript 中。

使用如下代码示例。

<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>

有什么想法吗？

Answer 1

这是我在良好验证后用来关闭 rich:modalPanel 的按钮：

<a4j:commandButton id="btnModify" value="Modifier" actionListener="#{editCityActions.onButtonModifyClick}" data="#{facesContext.maximumSeverity.ordinal ge 2}" oncomplete="if(event.data == false) { #{rich:component('frmEditCity')}.hide(); }" render="tblCities" />

我认为您可以使用 a4j:ajax 或类似的东西应用事件！

Answer 2

我们最终迁移到 Richfaces 4 (4.2)，并且我成功地使用了 itemchange 和 beforeitemchange

事件。

这些事件会触发两次（还没有弄清楚那一个），因此您不希望处理程序代码中出现任何过于密集的内容。

如果 beforeitemchange 返回 false（两次），则选项卡面板将不会切换。

我使用 itemchange 事件来触发任何额外的 JavaScript 来格式化数据，并将焦点放在该选项卡上表单中的第一个输入字段上。