Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad

Question

I have 1 very long form that needs to be split into pieces, but it is submitted and validated as one.

I have split it into tr:panelTabbed sections each of which displays a set of fields.

The validation messages are displayed currectly in the first tab but if one of the other tabs is checked its' validation messages are not displayed.

Tabbing back to the original, its' validation messages are also not displayed.

Is there any way around this?

It looks like the tab interface only generates 1 tab at a time and requires a page reload for every tab.

Alternatively is there a better way to break up a large form? I don't really like the look of the "train" navigation but will it accomplish the goal here?

EDIT: I am using Myfaces and Trinidad and cannot use another component library due to corporate guidelines.

EDIT: I have posted the 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>

Thanks for the quick response! I've posted the XHTML (edited to remove a bunch of stuff so it's not too long). About using a wizard component, could you elaborate? I don't know this component sorry! — Laila Agaev, Jul 10 '13 at 16:13
Oh ok. Sorry I didn't clarify but I can't use that due to corporate guidelines. Only MyFaces and Trinidad components are allowed. — Laila Agaev, Jul 10 '13 at 16:34

score 0 · Accepted Answer · answered Jan 13 '14 at 15:21

I ended up using basic Javascript + CSS tabs for this. For my use-case, the tabs are really cosmetic, ie, they break up the page but aren't meant to be submitted separately.

I also considered using pure CSS tabs, however from my investigation they don't work with cases where the heights of the tabs are not all equal and may change using AJAX.

The best solution I can come up with is to make a list of <a> links, then use the onclick Javascript event for each URL to make the div ("tab") that it is attached to (using the href attribute of the <a> to save the id of the div you are trying to open), and in the onclick change the display CSS property of the divs (by changing the className Javascript property to show 1 div and hide the others). That way as you click through the list the divs become visible.

There are many ready-made implementations for Javascript tabs (most Javascript libraries probably have one) as well as tutorials online. One that implements what I described above is: here

Validating one form with multiple tabs, how to switch tabs without losing validation errors? Using Myfaces and Trinidad

1 Answers1

Linked