表单验证失败时防止在 p:tabView 上切换选项卡

Question

我正在使用 primefaces 的 tabView-Element。第一个选项卡指向“主页”元素，第二个选项卡指向注册表单。注册表单已验证。问题是，当表单被验证时，用户被重定向到主页选项卡。当用户导航回来时，他可以看到验证错误。

这似乎是一个或多或少常见的问题，但我没有找到合适的解决方案。我尝试了 Oleg Varaksin suggestion 以防止用户在表单验证失败时切换选项卡，但我的问题更早开始。

我试图用 onTabChange 事件来调整 aorund 但没有成功。我的代码中是否有错误，或者我该如何处理？我欢迎朝着正确的方向前进。

<p:tabView id="mainTabView">
    <p:tab title="Startseite" id="startPage">
        <p:layout style="min-width:400px;min-height:400px;border:none !important"
            id="layout_login">
            <p:layoutUnit position="west" size="305">
                <p:panel>
                    <h:form id="loginForm">
                        <p:panelGrid columns="2" styleClass="gridWithNoBorders reducedFontSize">
                            <p:outputLabel value="Benutzername:" />
                            <p:inputText size="14" value="#{data.username}" />
                            <p:outputLabel value="Passwort:" />
                            <p:inputText size="14" value="#{data.loginPassword}" />
                        </p:panelGrid>
                        <p:separator />
                        <h:commandButton styleClass="reducedFontSize" value="Anmelden" />
                    </h:form>
                </p:panel>
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <p:panel>
                Lorem ipsum dolor sit amet(...)
                </p:panel>

                        </p:layoutUnit>
        </p:layout>
    </p:tab>
    <p:tab id="registrationPage" title="#{ivy.cms.co('/Translations/Registration/tabTitleRegistration')}" >

        <h:form id="registrationForm">
            <p:panel header="#{ivy.cms.co('/Translations/Registration/panelHeaderRegistration')}">
                <p:panelGrid columns="3">

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelEmail')}" />
                    <p:inputText value="#{data.email}" id="email1" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterEmailAddress')}">
                        <f:validator validatorId="EmailValidator" />
                        <f:validator validatorId="EmailCompareValidator" />
                    </p:inputText>
                    <p:message for="email1" />

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelRepeatEmail')}" />
                    <p:inputText value="#{data.emailConfirm}" id="email2" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/repeatMailAddress')}">
                        <f:validator validatorId="EmailValidator" />
                    </p:inputText>
                    <p:message for="email2"/>

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelPrename')}" />
                    <p:inputText value="#{data.prename}" id="prename" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterPrename')}"/>
                    <p:message for="prename"/>

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelSurname')}" />
                    <p:inputText value="#{data.surname}" id="surname" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterSurname')}"/>
                    <p:message for="surname"/>

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelPassword')}" />
                    <p:password id="pwd1" value="#{data.registrationPassword}" match="pwd2"
                        required="true" feedback="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/enterPassword')}"
                        weakLabel="#{ivy.cms.co('/Translations/Registration/passwordWeak')}"
                        goodLabel="#{ivy.cms.co('/Translations/Registration/passwordMedium')}"
                        strongLabel="#{ivy.cms.co('/Translations/Registration/passwordStrong')}" />
                    <p:message for="pwd1"/>

                    <p:outputLabel value="#{ivy.cms.co('/Translations/Registration/labelRepeatPassword')}" />
                    <p:password id="pwd2" value="#{data.confirmPassword}" required="true" requiredMessage="#{ivy.cms.co('/Translations/Registration/repeatPassword')}"/>
                    <p:message for="pwd2"/>

                    <h:commandButton value="#{ivy.cms.co('/Translations/Registration/finishRegistration')}"  actionListener="#{logic.startRegistration}" >
                        <p:ajax event="click" listener="#{logic.startRegistration}"/> 
                    </h:commandButton>

                </p:panelGrid>
            </p:panel>
        </h:form>

    </p:tab>
</p:tabView>

Answer 1

我必须结合 binding 和 ajax 来实现我的目标。似乎 activeIndex 在表单验证（？）之后被重置，因此在提交表单后它不会被兑现。我使用了 Steves 向use the binding property 建议的方法。所以这里是工作代码：

xhtml:

<p:layoutUnit position="center">
    <p:tabView id="mainTabView" binding="#{tabIndexHelper.messagesTab}">
        <p:ajax event="tabChange" listener="#{tabIndexHelper.onTabChange}" />
        <p:tab title="Startseite" id="startPage">
            <ui:include src="HomePage.xhtml" />
        </p:tab>
        <p:tab id="registrationPage" title="#{ivy.cms.co('/Translations/Registration/tabTitleRegistration')}" >
            <ui:include src="RegisterPage.xhtml" />
        </p:tab>
    </p:tabView>
</p:layoutUnit>

还有后台bean：

private TabView messagesTab = new TabView();

    public TabView getMessagesTab () {
        return messagesTab;
    }

    public void setMessagesTab(TabView messagesTab ) {
        this.messagesTab = messagesTab;
    }

    public void onTabChange(TabChangeEvent event) {   
        TabView tabView = (TabView) event.getComponent();

        int activeIndex = tabView.getChildren().indexOf(event.getTab()); 

        this.messagesTab.setActiveIndex(activeIndex);

    }  

感谢支持。 :)

Answer 2

如果不更新或验证，则需要修复当前选择的选项卡，应重置选项卡视图并选择默认选项卡（第一个）。

所以你可以使用 tabView 中的 activeIndex 属性：

<p:tabView activeIndex="#{bean.activeIndex}"/>

来自Primeface User Guide：

activeIndex 是一个 Integer，默认值为 0。活动选项卡的索引。

并创建一个事件来设置这个变量：

<p:ajax event="tabChange" listener="#{bean.onTabChange}"/>