2017-03-27 20 views
0

JSF 2.2.8とprimefaces 6.0を使用しています。作成ボタンをクリックすると表示されるポップアップが表示されます。 。ポップアップが表示されてからポップアップが表示されるまで検証を適用します。

ただし、投稿時に検証が適用されます。ポップアップフィールドは赤い線で表示されます。

このように、ポップアップの保存ボタンをクリックすると、検証を適用したいと思います。あなたのバリデータが解雇されているので、ここで

私のXHTML

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:p="http://primefaces.org/ui" 
      template="/WEB-INF/template.xhtml"> 

<ui:define name="title">Test</ui:define> 

<ui:define name="content"> 
<h:form id="form"> 

    <div class="ui-g"> 
     <div class="ui-g-12"> 
      <div class="card card-w-title">  
      <h1>Ressource</h1>  

      <p:commandButton update=":form:nouvelleRessource" value="Create" oncomplete="PF('createDialog').show()" icon="ui-icon-add" title="Create"/> 
      <p:commandButton value="Import" icon="ui-icon-import-export" title="Create"/> 


        <p:dataTable var="ressource" value="#{ressourceBean.ressources}" paginator="true" rows="5" selectionMode="single" reflow="true" 
            rowKey="#{ressource.idt_ressource}" id="ut" editable="true" emptyMessage="Aucune ressource trouvée"> 
           <f:facet name="header"> 
           Listes des ressources 
           </f:facet> 

          <p:ajax event="rowEdit" listener="#{ressourceBean.onEdit}" /> 
          <p:ajax event="rowEditCancel" listener="#{ressourceBean.onCancel}" /> 


          <p:column headerText="Id" filterBy="#{ressource.idt_ressource}" filterMatchMode="contains" filterOptions=""> 
          <p:cellEditor> 
          <f:facet name="output"> 
          <h:outputText value="#{ressource.idt_ressource}"/> 
          </f:facet> 
          <f:facet name="input"> 
          <h:inputText value="#{ressource.idt_ressource}" style="width:100%" /> 
          </f:facet> 
          </p:cellEditor> 
          </p:column> 

          <p:column headerText="Nom" filterBy="#{ressource.nom}" filterMatchMode="contains"> 
          <p:cellEditor> 
          <f:facet name="output"> 
          <h:outputText value="#{ressource.nom}"/> 
          </f:facet> 
          <f:facet name="input"> 
          <h:inputText value="#{ressource.nom}" style="width:100%" /> 
          </f:facet> 
          </p:cellEditor> 
          </p:column> 

          <p:column headerText="prenom" filterBy="#{ressource.prenom}" filterMatchMode="contains" > 
          <p:cellEditor> 
          <f:facet name="output"> 
          <h:outputText value="#{ressource.prenom}"/> 
          </f:facet> 
          <f:facet name="input"> 
          <h:inputText value="#{ressource.prenom}" style="width:100%" /> 
          </f:facet> 
          </p:cellEditor> 
          </p:column> 

          <p:column headerText="Matricule" filterBy="#{ressource.matricule}" filterMatchMode="contains"> 
          <p:cellEditor> 
          <f:facet name="output"> 
          <h:outputText value="#{ressource.matricule}"/> 
          </f:facet> 
          <f:facet name="input"> 
          <h:inputText value="#{ressource.matricule}" style="width:100%" /> 
          </f:facet> 
          </p:cellEditor> 
          </p:column> 

          <p:column headerText="Mail" filterBy="#{ressource.mail}" filterMatchMode="contains"> 
          <p:cellEditor> 
          <f:facet name="output"> 
          <h:outputText value="#{ressource.mail}"/> 
          </f:facet> 
          <f:facet name="input"> 
          <h:inputText value="#{ressource.mail}" style="width:100%" /> 
          </f:facet> 
          </p:cellEditor> 
          </p:column> 

          <p:column headerText="Modifier" > 
          <p:rowEditor/> 
          </p:column> 

          <p:column headerText="Supprimer" > 
          <center> 
          <p:commandButton actionListener="#{ressourceBean.delete(ressource)}" icon="ui-icon-delete" update="@ut" ajax="false"/> 
          </center> 
          </p:column> 

          </p:dataTable> 


      <p:dialog header="Nouvelle ressource" widgetVar="createDialog" modal="true" visible="#{facesContext.validationFailed}" > 

        <p:panel id="nouvelleRessource" header="Create Ressource"> 
        <p:panelGrid columns="4" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" layout="grid" styleClass="ui-panelgrid-blank form-group" style="border:0px none; background-color:transparent;"> 

        <p:outputLabel for="nom1" value="Nom"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:inputText id="nom1" value="#{ressourceBean.ressource1.nom}" required="true" /> 
        <p:message for="nom1" display="icon" /> 
        <label>nom</label> 
        </h:panelGroup> 

        <p:outputLabel for="mail1" value="Mail"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:inputText id="mail1" value="#{ressourceBean.ressource1.mail}"   
           requiredMessage="Please enter your email address." 
           validatorMessage="Invalid email format"> 
        <f:validateRegex 
         pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" /> 
        </p:inputText> 
        <label>Mail</label> 
        </h:panelGroup> 

        <p:outputLabel for="prenom1" value="Prenom"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:inputText id="prenom1" value="#{ressourceBean.ressource1.prenom}" required="true"/> 
        <p:message for="prenom1" display="icon" /> 
        <label>prenon</label> 
        </h:panelGroup> 

        <p:outputLabel for="telephone1" value="Telephone"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:inputText id="telephone1" value="#{ressourceBean.ressource1.telephone}" required="true" /> 
        <p:message for="telephone1" display="icon" /> 
        <label>Telephone</label> 
        </h:panelGroup> 

        <p:outputLabel for="matricule1" value="Matricule"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:inputText id="matricule1" value="#{ressourceBean.ressource1.matricule}" required="true"/> 
        <p:message for="matricule1" display="icon" /> 
        <label>Matricule</label> 
        </h:panelGroup> 

        <p:outputLabel for="date1" value="Date d'entree"/> 
        <h:panelGroup styleClass="md-inputfield"> 
        <p:calendar id="date1" value="#{ressourceBean.ressource1.dateEntree}" required="true"/> 
        <p:message for="date1" display="icon" /> 
        <label>Matricule</label> 
        </h:panelGroup> 


        </p:panelGrid> 
        <p:commandButton icon="ui-icon-save" actionListener="#{ressourceBean.save}" onclick="PF('createDialog').hide()" value="Save" update="ut" ajax="false" style="display:inline-block;margin-top:5px"/> 
        <p:commandButton icon="ui-icon-cancel" update="ut" onclick="PF('createDialog').hide()" value="Cancel" /> 
       </p:panel> 
      </p:dialog> 


      <p:commandButton update=":form:nouvelleRessource" value="Create" oncomplete="PF('createDialog').show()" icon="ui-icon-add" title="Create"/> 
      <p:commandButton value="Import" icon="ui-icon-import-export" title="Create"/> 

      </div> 
     </div> 
    </div> 
    </h:form> 
</ui:define> 

答えて

2

はのcommandButtonのAJAXは、明示的プロセス属性を設定しない時はいつでも囲むフォームを送信しようとしています。 javascriptを使用してダイアログを開くと、作成ボタンがonclickイベントの単純なボタンとしてレンダリングされるように変更できます。

関連する問題