1

I have home tab and Validation tab. I like to validate user input and switch back to home tab if the user input is valid, otherwise stay on validation tab. At this point, it is switching back to home tab even for invalid user input after I click on submit button.

index.xhtml

<p:tabView>
    <p:tab title="Home" titleStyleClass="repo">
        <h:panelGrid columns="2" cellpadding="10">
            <h:form>
             /****home table code here***/
            </h:form>
        </h:panelGrid>
    </p:tab>

    <p:tab title="Validation">
        <h:form>
            <h:panelGrid id="grid" columns="4" cellpadding="5">
                <h:outputLabel for="number" value="number:" />
                <p:inputText id="number" value="#{validationView.number}"
                    label="Number">
                    <f:validateDoubleRange minimum="100" maximum="200" />
                </p:inputText>
            </h:panelGrid>
        <p:commandButton value="Submit"
                actionListener="#{controller.saveA}" ajax="false"
                icon="ui-icon-check" validateClient="true" style="float-right" />
        </h:form>
    </p:tab>
</p:tabView>

I am sure, I am missing something here, I don't know how to get back the validation result on a particular tab in primefaces and set tab switching based on that.

*I am using primefaces 5.1

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
SamK
  • 377
  • 9
  • 27

1 Answers1

3

You have ajax="false" on your submit button. And since you do not use the activeIndex of the tabView, it wil always switch back to the first tab. Use ajax="true" (the default) instead of false. When removing the ajax="false", it should stay at the tab you are at. Also make sure you give your tab a widgetVar like 

<p:tabView widgetVar="tabWidget">
    ...
</p:tabView>

You have two options then:

  1. in the oncomplete event of the commandButton, check for validationErrors and if non occured, switch to the first tab

    <p:commandButton value="Submit"
    actionListener="#{controller.saveA}"
    icon="ui-icon-check" validateClient="true" style="float-right"
    oncomplete="if (args &amp;&amp; !args.validationFailed) tabWidget.select(0);"
/>

    See for the why of the escaping of the & : Keep p:dialog open when a validation error occurs after submit

  2. You could also use the fact that IF your listener is called, you know that validation succeded. So in the listener you could use the remoteContext and make that execute the tab switch

    RequestContext.getCurrentInstance().execute("tabWidget.select(0)");
Community
  • 1
  • 1
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • if I set ajax="false", my validation error message and primefaces page refresh is getting disabled. – SamK Feb 17 '15 at 22:29
  • In your question and answer there was nothing about additional info that needed to be updated, but the solution is simple, just add an update attribute to the commandbutton and update the message(s)/growl and other relevant parts – Kukeltje Feb 18 '15 at 01:00