2015-09-08 2 views
1

У меня в приложении JSF 2.2 + PrimeFaces есть мастер с тремя вкладками. На каждой вкладке у меня есть форма для захвата данных от пользователя. Каждая из этих форм имеет некоторые валидации. Прямо сейчас, когда я нажимаю дальше, чтобы перейти к следующей вкладке, он проверяет данные из формы. Я не хочу, чтобы это произошло.Как предотвратить запуск следующей кнопки мастера «mainface wizard»?

Пользователь сохраняет данные в данных на одной вкладке, а затем они хотят продолжать движение вперед. Нет требования, чтобы данные в форме переходили на следующую вкладку.

Я смог исправить это, не имея проверки на стороне клиента (то есть: не использовать слово в полях ввода) и только для проверки на бэкэнд. Проблема в том, что я хочу проверку на стороне клиента.

Мой мастер выглядит следующим образом:

<h:form id="wizard"> 

    <p:wizard flowListener="#{afiliadoController.onFlowProcess}" nextLabel="Siguiente" 
    backLabel="Anterior" showStepStatus="true"> 

    <p:tab id="afiliadoTab" title="Afiliado"> 

      <p:growl autoUpdate="true"/> 

      <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." /> 

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

        <p:inputText id="apellidos" value="#{afiliadoController.afiliado.apellido}" 
        requiredMessage="Debe insertar un apellido." /> 

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

        <p:selectOneMenu id="estadoCivil" effect="drop" value="#{afiliadoController.afiliado.estado_civil}" 
        requiredMessage="Debe seleccionar un estado civil." > 

         <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}"/> 

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

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

        <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}"> 

         <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." > 

         <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="true"> 

         <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>   

      </p:panel> 

    </p:tab> 

    </p:wizard> 

</h:form> 

Это нарочно я отображаются только первую вкладку, чтобы сделать его более удобным для чтения. На этой первой вкладке у меня есть две внутри основной (я не уверен, что это хорошая практика.)

Я делаю это, потому что хочу, чтобы введите ключевое слово для работы отдельно по каждой форме. С идентификатором afiliadoTab имеет некоторые проверки. Я хочу, чтобы эта валидация произойти только тогда, когда я нажимаю на кнопке:

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

Я не хочу, чтобы эта валидация произойдет, когда я нажимаю на ДАЛЕЕ. Что я могу сделать? (Я знаю, что в SO есть несколько подобных вопросов, но я не мог получить ответ. Например, один из них использует пользовательские виджеты-виджеты. Я попытался это сделать, но я нашел несколько вопросов:

  1. Как я могу отобразить кнопку назад только тогда, когда это необходимо? (Не отображать его на первой вкладке)

  2. в валидация все еще на месте, даже когда я использую @this.

Что мои лучшие варианты?

Required Validation Primeface wizard

+0

Предупреждение всем, кто рассматривает возможность нажатия на эту ссылку: ** не делайте этого **. Это отверстие кролика в темной бездне щедрых ответов, связанных друг с другом, от которых вы никогда не убежате. – Andrew

ответ

1

я, наконец, понял, способ сделать это благодаря @Geinmachi и @BaulusC размещать here

Так это обновленный код:

<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>  

Посмотрите на все мои поля. Все они имеют это:

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

Если вы посмотрите на мою кнопку, то есть:

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

Таким образом, когда я нажимаю на кнопку ДАЛЕЕ на моем мастере, он не будет активировать проверки. Проверки будут ТОЛЬКО активироваться, когда я нажимаю кнопку на этой конкретной форме!

Я надеюсь, что это кому-то поможет.

+0

Не думал о том, чтобы делать это в 'required', может быть, мне уже слишком поздно. – Geinmachi

2

У вас есть вложенные формы. Каждый <h:form> на вкладке находится внутри другого <h:form> снаружи <p:wizard>. Вам не нужны отдельные формы, только один внешний мастер.

EDIT:

Существует несколько обходного пути для этого, которое работает для меня (не проверять поле после нажатия СЛЕДУЮЩЕГО, но проверяет после нажатия кнопки моей для проверки).

Для полей, которые вы не хотите, чтобы проверить на СЛЕДУЮЩИЙ добавить этот тег (например, для <h:inputText>)

<f:validateBean disabled="#{!request.getParameter('validate')}" /> и кнопке добавить этот тег <f:param name="validate" value="true"/>.

+0

Но вы понимаете мою ситуацию? Я хочу иметь возможность выполнять проверку на стороне клиента в каждой форме и иметь возможность щелкнуть NEXT, чтобы перейти к следующей вкладке – Erick

+0

Обновлено мой ответ – Geinmachi

+0

Я попробую это и сообщит, работает ли оно – Erick

1

Так что, если кто-то будет иметь проблемы проверки, подобные этому есть два случай:

  1. Если вы используете JSF проверки как PrimeFaces required атрибут или обычных тег, как <f:validateRequired/> вы можете сделать required = "#{!request.getParameter('validate')}" и <f:validateRequired disabled="#{!request.getParameter('validate')}"/> как OP или
  2. Если используется проверка JSR Bean как @NotNull вы можете сделать <f:validateBean disabled="#{!request.getParameter('validate')}" />

, чтобы отключить проверку с помощью кнопки <f:param name="validate" value="true"/>.

Смежные вопросы