验证具有多个选项卡的表单，如何切换选项卡而不丢失验证错误？使用 Myfaces 和特立尼达答案

【问题标题】：Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad验证具有多个选项卡的表单，如何切换选项卡而不丢失验证错误？使用 Myfaces 和特立尼达
【发布时间】：2013-07-08 13:38:21
【问题描述】：

我有 1 个很长的表单需要拆分，但它被提交并验证为一个。

我已将其拆分为 tr:panelTabbed 部分，每个部分显示一组字段。

验证消息会在第一个选项卡中正确显示，但如果选中其他选项卡之一，则不会显示其验证消息。

Tabbing 回到原来的，它的验证消息也不会显示。

有没有办法解决这个问题？

看起来标签界面一次只生成一个标签，并且需要为每个标签重新加载页面。

或者，有没有更好的方法来分解大型表格？我不太喜欢“火车”导航的外观，但它会在这里实现目标吗？

编辑：我正在使用 Myfaces 和 Trinidad，由于公司准则，我无法使用其他组件库。

编辑：我已经发布了 XHTML：

<ui:define name="output">
    <div id="container">
    <tr:panelTabbed position="above">

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
        <!-- Tab 1-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
            <snip for brevity>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="General Order Information" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">
        <!-- Tab 2-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_REP']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>

        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_CMR']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">

        <!-- Tab 3 -->  
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="Translation Information" disabled="#{!taskHandler.task.translation.required}">
        <ui:include src="ToDo_ICN_trans.xhtml"/>
    </tr:showDetailItem>

    </tr:panelTabbed>
    <h:outputScript name="script/orderDeskPODocument.js"/>
    </div>
</ui:define>

<ui:define name="input">
...
</ui:define>

【问题讨论】：

也许使用向导组件会更好。
能不能把xhtml代码...
感谢您的快速回复！我已经发布了 XHTML（编辑删除了一堆东西，所以它不会太长）。关于使用向导组件，您能详细说明一下吗？我不知道这个组件抱歉！
是一个primefaces组件。
哦，好的。抱歉，我没有澄清，但由于公司准则，我不能使用它。只允许使用 MyFaces 和 Trinidad 组件。

标签： validation jsf-2 myfaces trinidad

【解决方案1】：

我最终为此使用了基本的 Javascript + CSS 选项卡。对于我的用例，这些选项卡实际上是装饰性的，即它们分解了页面，但并不意味着要单独提交。

我也考虑过使用纯 CSS 选项卡，但根据我的调查，它们不适用于选项卡高度不完全相等且可能使用 AJAX 更改的情况。

我能想到的最佳解决方案是列出<a> 链接，然后使用每个 URL 的 onclick Javascript 事件来创建它所附加的 div（“选项卡”）（使用 @987654323 <a> 的 @ 属性来保存您尝试打开的 div 的 id），并在 onclick 中更改 div 的显示 CSS 属性（通过更改 className Javascript 属性以显示 1 个 div 并隐藏其他 div）。这样，当您单击列表时，div 就会变得可见。

有许多现成的 Javascript 选项卡实现（大多数 Javascript 库可能都有）以及在线教程。实现我上面描述的一个是：here

【讨论】：