如何验证在多个选项卡上共享的实体

Question

我有一个具有许多属性的实体，这些属性应该显示在 p:tabView 的多个选项卡中。它可能看起来像下面这样。

我有一个 h:form 围绕着 p:tabView。在选项卡中，每个输入元素都有一个 p:message。

<p:column>
    <p:outputLabel value="Name" for="name_input" />
</p:column>
<p:column>
    <p:message for="name_input" display="icon" />
</p:column>
<p:column>
    <p:inputText id="name_input" value="#{bean.person.name}">
        <p:ajax /> <!-- put value into backingbean on tabchange -->
        <f:validateRequired />
    </p:inputText>
</p:column>

我做了以下观察。

1) 问题：验证仅在已激活的选项卡中执行

如果我切换到编辑模式并且当前选项卡没有验证错误并且我没有更改选项卡，那么我的实体将被保存并且其他选项卡上的验证错误将被忽略。
如果我切换到编辑模式并导航到有验证错误的选项卡，然后导航到第一个没有验证错误的选项卡，则会显示验证错误（但仅来自那些选项卡，我访问过）。
（我希望这是可以理解的，至少是一点点）如果我在 p:tabView 中设置 dynamic=true/false 和 cache=false 并没有什么区别.

2) 问题：选项卡更改时没有消息图标

如果我切换到编辑模式并单击每个选项卡以便识别每个验证错误（如场景 b），我会收到正确的验证消息（图标）并且 p:inputText 显示为红色边界。所以一切似乎都很好。但是，如果我导航到另一个出现验证错误的选项卡，则不会显示任何消息图标，只有红色边框围绕着特定的 p:inputText。据我猜测，JSF 生命周期是在选项卡更改时执行的，但没有进行任何验证，因此对于此生命周期往返，一切正常并且消息图标消失（另一方面，对我来说为什么红色边框不消失是个谜消失...）。

3) 问题：选项卡中没有视觉提示

为了用户体验，我非常希望有一个视觉提示（即 tab-title 上的红色背景），以便用户知道问题出在哪里。

我读过 Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad 但向导（它不是 "wizardy" 任务，它只是一个大实体的编辑）和 do-it-yourself-with-javascrip-and-css（主要问题是corporate identity 我在其他情况下经常使用 tabViews）对我来说是个不错的选择。

有人 solution/hint 解决我的任何问题吗？

我正在使用 JSF 2.2、Primefaces 5.3。

Answer 1

好的，我的一个同事想出了答案。

首先，我的前两个问题烟消云散了。使用 <p:tabView /> 中的 dynamic="false" 和 cache="false" 属性可以按预期工作（我不知道当时我测试了什么）。

以及选项卡中的视觉提示。有一个 <f:facet name="title" /> 可用于显示选项卡标题和附加消息。 <p:message /> 组件加倍，首先在输入组件的列内，其次在 title-facet 中。稍微CSS就可以随意调整标题中的图标。

<p:tabView dynamic="false" cache="false">
    <f:facet name="title">
        Address
        <p:message for="name_input" display="icon" />
    </f:facet>
    ...
    <p:panelGrid>
        <p:row>
            <p:column>
                <p:outputLabel value="Name" for="name_input" />
            </p:column>
            <p:column>
                <p:message for="name_input" display="icon" />
            </p:column>
            <p:column>
                <p:inputText id="name_input" value="#{bean.person.name}">
                    <p:ajax />
                    <f:validateRequired />
                </p:inputText>
            </p:column>
        </p:row>
        ....
    </p:panelGrid>
</p:tabView>

如何验证在多个选项卡上共享的实体

Howto validate an entity shared over multiple tabs

validation

jsf

primefaces

tabview