I need a button that performs an action but doesn't trigger validation or refreshes the page(JSF 2.0)

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): enter image description here

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?

Are the form contents of both panels related to each other? I.e. a real submit must take the data of both panels into a single managed bean? — BalusC
No they are different. One belongs to an entity called buyer and another to an entity called Seller. Also i have 2 different managed beans being called in that page. At the moment i managed to do what i want ussing different forms, and using an accordion primefaces.org/showcase/ui/accordionPanel.jsf i would like to replace this component with the idea above. The comment that nikki said is ok and it works but i dont want to have that javascript syntax visible in my page. Any ideas? — javing
If they are different and independent from each other, each definitely needs to go in its own <h:form>. You should not put everything in single big form. I'm not posting this as an answer because that's already been answered. — BalusC
Yes has different forms, as Jitesh said. That is correct now, validation from one panel don't disturb the other. The only thing missing is i don't know how to show and hide the panels when i click on the button. Is there other alternative than what Nikhil Patil said? Thanks — javing
I'm not sure if I understand you. The <p:tabView> in combination with (default) ajax magic already does that. Or are you actually not using <p:tabView>? — BalusC

Jitesh Jitesh · Accepted Answer · 2011-04-07T04:26:27

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>

I need a button that performs an action but doesn't trigger validation or refreshes the page(JSF 2.0)

4 Answers