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>个链接，然后使用onclick Javascript事件为每个URL创建它所附加的div（“tab”）（使用href的{{1}}属性保存您尝试打开的div的id，并在onclick中更改div的显示CSS属性（通过更改className Javascript属性显示1 div并隐藏其他人）。这样，当你点击列表时，div就会变得可见。

Javascript标签有许多现成的实现（大多数Javascript库可能有一个）以及在线教程。实现上述内容的是：here

使用多个选项卡验证一个表单，如何切换选项卡而不会丢失验证错误？使用Myfaces和Trinidad

1 个答案: