首页 文章

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

提问于
浏览 次
0

我有一个具有许多属性的实体，应该在p：tabView的多个选项卡中显示 . 它可能如下所示 .
enter image description here

我有一个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) Problem: validation is only executed in tabs which have been activated

  • 如果我切换到编辑模式并且当前选项卡没有验证错误而我没有更改选项卡，那么我的实体将被保存，其他选项卡上的验证错误将被忽略 .

  • 如果我切换到编辑模式并导航到有验证错误的选项卡，然后导航到第一个选项卡而没有验证错误，则会显示错误错误（但仅显示我访问过的那些选项卡） .

  • （我希望这是可以理解的，至少是一点点）如果我在p：tabView中设置dynamic = true / false和cache = false，那就无济于事了 .

2) Problem: no message icon on tab change

  • 如果我切换到编辑模式并单击每个选项卡，以便识别每个验证错误（如在方案b中），我会得到一个正确的验证消息（图标），并且p：inputText显示为红色边框 . 所以一切似乎都很好 . 但是，如果我导航到另一个带有验证错误的选项卡，则没有显示消息图标，只有红色边框位于特定的p：inputText周围 . 据我所知，JSF生命周期是在标签更改上执行但没有进行验证所以对于这个生命周期往返一切都没问题，消息图标消失了（另一方面，对我来说，为什么红色边框不会是一个谜消失...） .

3) Problem: no visual hint in the tab

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

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

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

我使用的是JSF 2.2，Primefaces 5.3 .

validation jsf primefaces tabview

1 回答

  • 0

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

    首先，我的前两个问题消失得无影无踪 . 使用 <p:tabView /> 中的 dynamic="false" 和 cache="false" 属性可以根据需要工作（我不知道我后来测试了什么） .

    选项卡中的视觉提示 . 有一个 <f:facet name="title" /> 可用于显示标签 Headers 和其他消息 . <p:message /> 组件加倍，首先在输入组件的列内，然后在title-facet中 . 使用一点CSS可以随意调整 Headers 中的图标 .

    <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>
    回复于

相关问题