Question

我有一个具有许多属性的实体，应该在p：tabView的多个标签中显示。它可能如下所示。

我有一个h：形式，它围绕着p：tabView。在选项卡中，我为每个输入元素都有一条p：消息。

<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）问题：标签中没有视觉提示

对于用户体验，我非常希望有一个视觉提示（即标题标题上的红色背景），以便用户知道问题发生的位置。

我已经阅读了Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad但是向导（它不是“巫术”任务，它只是一个大型实体的编辑），也不是自己用javascrip-and-css（主要问题是我经常使用的公司身份tabViews在其他情况下）对我来说是一个不错的选择。

有没有人对我的任何问题有解决方案/提示？

我正在使用JSF 2.2，Primefaces 5.3。

Answer 1

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

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

选项卡中的视觉提示。有<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>

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

1 个答案: