當表單驗證失敗時阻止p：tabView上的tab-siwtch

Question

我正在使用primefaces的tabView-Element。第一個選項卡指向「Home」元素，是註冊表單的第二個元素。註冊表格經過驗證。問題是，當表單被驗證時，用戶將重定向到主頁選項卡。當用戶導航回來時，他可以看到驗證錯誤。

這似乎是一個或多或少的常見問題，但我沒有找到合適的解決方案。我嘗試了Oleg Varaksin suggestion以防止用戶在表單驗證失敗時切換選項卡，但是我的問題早期啓動。

我試圖用onTabChange事件來處理aorund，但沒有成功。我的代碼中是否有錯誤，或者如何處理may probelm？我會歡迎推動正確的方向。

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

​​

謝謝支持。 :)

Answer 2

如果您沒有更新或驗證應該使用默認選項卡（第一個）重置選項卡視圖，則需要修復所選的當前選項卡。

所以，你可以使用activeIndex attribut從TabView的：

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

從Primeface User Guide：

activeIndex與活動選項卡的默認值爲0索引的整數。

，並創建一套的情況下，本VAR這樣的：

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