使用多个选项卡验证一个表单，如何在不丢失验证错误的情况下切换选项卡?使用Myfaces和Trinidad

Question

我有一个很长的表单，需要拆分成多个部分，但它是作为一个表单提交和验证的。

我把它分成了tr:panelTabbed部分，每个部分都显示一组字段。

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

选项卡返回到原始，其"验证消息"也不会显示。

有办法解决这个问题吗？

看起来选项卡界面一次只生成一个选项卡，并且需要为每个选项卡重新加载页面

或者，有没有更好的方法来分解一个大表单？我真的不喜欢"火车"导航的外观，但它能实现这里的目标吗？

编辑：我正在使用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>

Answer 1

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

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

我能想到的最好的解决方案是制作一个<a>链接列表，然后对每个URL使用onclick Javascript事件来制作它所附加的div（"tab"）（使用<a>的href属性来保存您试图打开的div的id），在onclick中更改div的display CSS属性（通过更改className Javascript属性以显示1个div并隐藏其他div）。这样，当您点击列表时，div就会变得可见。

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