Question

I’m using <p:wizard> with several tabs. Some of the tabs contain inputs that needs validation, for example credit card number. But the entire tab can be skipped. How to do the skip to next tab?

I’m thinking of 2 implementations, but I’m not sure how:

1. Add a skip button that will go to the next tab without validation the current.

   <p:commandButton process="@this" immediate="true" onclick="wiz.next();" value="#{msgs['action.skip']}"></p:commandButton>
   

The wizard.

<p:wizard widgetVar="wiz" flowListener="#{accountActivationController.onFlowProcess}" nextLabel="#{msgs['action.next']}" backLabel="#{msgs['action.back']}">
    <p:tab id="tabProfile">     
            //...
    </p:tab>
    <p:tab id="tabAddress">     
        <p:panel>
            <p:inputText id="shippingZipCode_OTHERS" value="#{accountActivationController.shippingAddress.postCode}">
            </p:inputText>
            <p:message for="shippingZipCode_OTHERS" />      
            <p:messages id="globalAddress" showDetail="true">
            </p:messages>
            <f:facet name="footer">
                <div class="buttons-set">
                    <p:commandButton process="@this" value="#{msgs['action.skip']}" oncomplete="wiz.next();">
                    </p:commandButton>
                </div>
            </f:facet>
        </p:panel>
    </p:tab>
    <p:tab id="tabSchool">  
            //....  
            <p:commandButton action="#{bean.submit} value="Submit" />
    </p:tab>
</p:wizard>

Seems like process is not working in this part. onclick, oncomplete on p:commandButton doesn’t change anything.

The goal is when the skip button is press, form validation should not be triggered, but I’m still trying to figure out how to do that.

1. Add a checkbox “Skip”, that will disable the validation on that specific tab.

Answer 1

After several hours of testing, I’ve verified that what kolossus said was true. The primefaces wizard doesn’t support selective processing of components, it always validate all the fields on a particular tab.

In my case, I’m only checking for required fields so what I did was remove all the required field validator, so when I click the Skip button it should navigate to the next tab. And when I click the Next button, inside onFlowListener event manually validate all the required fields.

Something like this:

public String onFlowProcess(FlowEvent event) {
    if (event.getOldStep().equals("tabAddress")) {
        if (skipToNext) {
            skipToNext = false; 
            return event.getNewStep();
        }
        if (StringUtils.isBlank(shippingAddress.getCountryCode())
                || StringUtils.isBlank(shippingAddress.getPostCode())
                || StringUtils.isBlank(shippingAddress.getState())
                || StringUtils.isBlank(shippingAddress.getAddress1())) {            
            facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "ERROR Address")));
            return event.getOldStep();
        }       
    }
}