Question

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

这似乎是一个或多或少的常见问题，但我找不到合适的解决方案。我尝试了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

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

所以你可以使用tabView中的activeIndex attribut：

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

来自Primeface User Guide：

activeIndex是一个整数，默认值为0.活动标签的索引。

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

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

Answer 2

我必须结合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);

    }

感谢您的支持。：）

当表单验证失败时，阻止p：tabView上的tab-switch

2 个答案: