Question

I need you to recommend me a JSF component that can help in the following scenario(I will first paste an image that will help me explain):

This page that you see in the image is a registration page, each of the panels have different fields and gadgets, when the register button is clicked, a new user is saved into the database.

The problem i have is in the show buttons. The buttons on top of each panel when clicked should display one panel and hide the other, but they must not trigger the field validation.

I use field validation by the attribute “validator”(in combination with a backing bean method) that most of JSF input fields have.
Currently everything that you see there is inside one h:form.

-what should i do to display a panel and hide the other without triggering the validation of the panel that is hiding?

-Is there another alternative to the h:commandLink or h:commandButton(they trigger the validation)?

-Putting each panel in a different h:form can do the trick?(Is that permited?)

-What do you think would be the best approach?

Answer 1

Use p:tabView Of primefaces, then put your contents(registration panels) in separate tab, use separate form for both of the tab, it will solve your problem….

e.g.

 <p:tabView>
        <p:tab title="panel1">
            <h:form id="form1" prependId="false">
                <h:inputText label="Sample Label"/>
                <p:commandButton value="register"/>
            </h:form>
        </p:tab>
        <p:tab title="panel2">
            <h:form id="form2" prependId="false">
                <h:inputText label="Sample Label"/>
                <p:commandButton value="register"/>
            </h:form>
        </p:tab>
    </p:tabView>