Show dialog when the input data is validated <p:confirmDialog> [duplicate]

Question

This question already has an answer here:

How to display dialog only on complete of a successful form submit (1 answer)

Closed 5 years ago.

For my school project I have to realize a mini website where I use primefaces framework. In a form I want after pressing the Save button two things: 1 - Validate the data entered. that's why I put

<p:message for="date" /> and <p:message for="zone" /> 

As the values ​​are not correct, the dialog box should not be displayed. 2 - When all data is correct, and I click Save, I want to display my dialog box.

Now I can not. Can you help me? I use version 4 primefaces.

<h:form>
<p:panel id="panel" header="Create"  style="margin-bottom:10px;border-color:blueviolet" >
    <p:messages id="messages" /> 
        <h:panelGrid columns="3">
            <h:outputLabel for="date" value="Date : *" />  
            <p:calendar locale="fr" id="date" value="#{newBusinessCtrl.exercice.debut}" required="true" label="date" showButtonPanel="true"/>   
            <p:message for="date" />  

            <h:outputLabel for="zone" value="Zone Monétaire: *" /> 
            <p:selectOneMenu id="zone" value="#{newBusinessCtrl.exercice.zoneChoice}"  >
                <f:selectItem itemLabel="Choice " itemValue="" />
                <f:selectItems value="#{newBusinessCtrl.exercice.zones}" var="azone"
                    itemLabel="#{azone}" itemValue="#{azone}" >
                </f:selectItems>
                <p:message for="zone" />
            </p:selectOneMenu>
            <p:message for="zone" /> 
        </h:panelGrid>  
</p:panel>
<p:commandButton update="panel" value="Save"   icon="ui-icon-check" style="color:blueviolet" onclick="choice.show()"/> 
<p:confirmDialog message="Would you like to create accounts automatically ?"
             header="Account creation" severity="alert"            
             widgetVar="choice" appendTo="@(body)">
        <p:button outcome="personalizeAccount" value="Personalize" icon="ui-icon-star" />
        <p:button outcome="autoAccount" value="Continue" icon="ui-icon-star" />
</p:confirmDialog>

Answer 1

Just show the dialog in Backing Bean like this:

Page：

 <p:commandButton update="panel" value="Save"   
                  icon="ui-icon-check"  
                  style="color:blueviolet" 
                  action="#{newBusinessCtrl.showDlg('choice')}"/> 

Backing Bean：

 public void showDlg(String dlgName){
    RequestContext.getCurrentInstance().execute(dlgName+".show()");
}

Once the validation failed, the action won't execute and thus the dialog will not show.

Answer 2

If validation hasn't failed. PrimeFaces puts a global args object in the JavaScript scope which in turn has a boolean validationFailed property. You can check it before showing the dialog So you can use it this way:

<p:commandButton value="save" oncomplete="if (args &amp;&amp; !args.validationFailed) saveDialog.show()"/>