How to prevent PrimeFaces wizard' next button activate client validations?

Question

I have in my JSF 2.2 + PrimeFaces application a wizard with three tabs. In each tab, I have a form to capture data from the user. Each of this form have some validations. Right

Answer 1

So if someone will have validation problem similar to this there are two cases:

1. If you use JSF validation like PrimeFaces required attribute or normal tags like <f:validateRequired/> you can do required = "#{!request.getParameter('validate')}" and <f:validateRequired disabled="#{!request.getParameter('validate')}"/> like OP or
2. If you use JSR Bean validation like @NotNull you can do <f:validateBean disabled="#{!request.getParameter('validate')}" />

to disable validation with <f:param name="validate" value="true"/> to an action button.

Answer 2

I finally figured out a way of doing it thanks to @Geinmachi and @BaulusC post here

So this is the updated code:

<p:panel styleClass="panels" id="panelAfiliado" style="margin-bottom:1em;" >

<p:focus context="panelAfiliado"/>

<h1> Agregue un Afiliado </h1>

<h:panelGrid columns="4" styleClass="panelGrid" >

  <p:outputLabel for="nombres" value="Nombres:" />

  <p:inputText id="nombres" value="#{afiliadoController.afiliado.nombre}"
  requiredMessage="Debe insertar un nombre." required="#{request.getParameter('validate')}"/>

  <p:outputLabel for="apellidos" value="Apellidos:" />

  <p:inputText id="apellidos" value="#{afiliadoController.afiliado.apellido}"
  requiredMessage="Debe insertar un apellido." required="#{request.getParameter('validate')}"/>

  <p:outputLabel for="estadoCivil" value="Estado Civil:" />

  <p:selectOneMenu id="estadoCivil" effect="drop" value="#{afiliadoController.afiliado.estado_civil}" 
  requiredMessage="Debe seleccionar un estado civil." required="#{request.getParameter('validate')}">

    <f:selectItem itemLabel="Estado Civil" itemValue=""/>
    <f:selectItem itemLabel="Soltero" itemValue="S"/>
    <f:selectItem itemLabel="Casado" itemValue="C"/>
    <f:selectItem itemLabel="Union Libre" itemValue="U"/>
    <f:selectItem itemLabel="Divorciado" itemValue="D"/>
    <f:selectItem itemLabel="Viudo" itemValue="V"/>

  </p:selectOneMenu>

  <p:outputLabel for="direccion" value="Direccion:" />

  <p:inputText id="direccion" value="#{afiliadoController.afiliado.direccion}" required="#{request.getParameter('validate')}"/>

  <p:outputLabel for="telefono" value="Telefono:" />

  <p:inputMask id="telefono" value="#{afiliadoController.afiliado.telefono}" mask="(999) 999-9999" 
  requiredMessage="Debe insertar un telefono." required="#{request.getParameter('validate')}"/>

  <p:outputLabel for="fechaNacimiento" value="Fecha de Nacimiento:"/>

  <p:calendar id="fechaNacimiento" yearRange="c-100:c" pattern="dd/MM/yyyy" navigator="true" 
  value="#{afiliadoController.afiliado.fecha_nacimiento}" 
  requiredMessage="Debe insertar su fecha de nacimiento." showOn="button" 
  readonly="#{facesContext.currentPhaseId.ordinal eq 6}" required="#{request.getParameter('validate')}">

    <p:ajax event="dateSelect" listener="#{afiliadoController.dateSelect}" update="edadAfi"/>

  </p:calendar>

  <p:outputLabel for="plan" value="Plan:" />              
  <p:selectOneMenu id="plan" effect="drop" value="#{afiliadoController.afiliado.plan}" 
  requiredMessage="Debe seleccionar un plan." required="#{request.getParameter('validate')}">

    <f:selectItem itemLabel="Seleccione un plan" itemValue=""/>
    <f:selectItem itemLabel="Vital Base" itemValue="1"/>
    <f:selectItem itemLabel="Vital Elite" itemValue="2"/>
    <f:selectItem itemLabel="Plan Vital Elite Internacional" itemValue="3"/>

  </p:selectOneMenu>

  <h:outputText value="Fecha: #{of:formatDate(now, 'dd/MM/yyyy')}"/>

  <h:outputText value="Edad Afiliado: #{afiliadoController.afiliado.edad}" id="edadAfi"/>

  <p:outputLabel for="modalidad" value="Modalidad:" />              
  <p:selectOneMenu id="modalidad" effect="drop" value="#{afiliadoController.afiliado.modalidad}" 
  requiredMessage="Debe seleccionar una modalidad." required="#{request.getParameter('validate')}">

    <f:selectItem itemLabel="Seleccione una modalidad" itemValue=""/>
    <f:selectItem itemLabel="Solo Titular Del Contrato" itemValue="A"/>
    <f:selectItem itemLabel="Titular del Contrato + Grupo Familiar" itemValue="B"/>

    <!-- <f:validateBean disabled="#{!request.getParameter('validate')}" /> -->

  </p:selectOneMenu>

  <p:commandButton value="Insertar" icon="fa fa-save" process="panelAfiliado" update="afiliadoTable"
   actionListener="#{afiliadoController.insertAfiliado}" >

    <f:param name="validate" value="true"/>

   </p:commandButton>

</h:panelGrid>       

Take a look at all of my fields. They all have this:

required="#{request.getParameter('validate')}"

If you take a look at my button, it has:

<f:param name="validate" value="true"/>

This way, when I click on the NEXT button on my wizard, it WON'T activate the validations. The validations will ONLY activate when I click the button on that particular form!

I hope this helps someone some day.

Answer 3

You have nested forms. Every <h:form> in a tab is inside other <h:form> outside <p:wizard>. You don't need separate forms, just the one outside wizard.

EDIT:

There is some workaround for this which works for me (don't validate field after clicking NEXT, but validates after clicking my button to validate).

For the fields you don't want to validate on NEXT add this tag (for example for <h:inputText>)

<f:validateBean disabled="#{!request.getParameter('validate')}" /> and to your button add this tag <f:param name="validate" value="true"/>.