Apply validation until the click of the popup and not at the time of the display

Question

i'm using JSF 2.2.8 and primefaces 6.0, i have a popup that appears after clicking on the create button Which contains a form with requiered fields.

But the validation applies at the time of posting, the popup fields appear with the red lines.

So I want to apply the validation when clicking on the save button of the popup.

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

Answer 1

The commandButton's AJAX is going to submit the enclosing form whenever you don't explicitly set the process attribute, so your validators are being fired. Since you're using javascript to open the dialog could change your create button so that it's rendered as a simple button with an onclick event:

<p:commandButton type="button" value="Create" onclick="PF('createDialog').show()" icon="ui-icon-add" title="Create"/>