How to display dialog only on complete of a successful form submit

Question

I have a form with 2 required input fields and a command button which shows a dialog:

<p:commandButton id="showDialogButton" value="Enregistrer" 
    action="#{DEQbean.Ajouter()}" update="@form"
    oncomplete="dialogaboutDEQ.show()" />

<p:dialog id="reamrquesDEQ" widgetVar="dialogaboutDEQ" header="Informations"
    width="400" closable="false" resizable="false" showEffect="clip"
    hideEffect="clip" modal="true" appendToBody="true">

    <p:messages id="messages" showDetail="true" autoUpdate="true"/>
    <p:commandButton value="OK" action="DEQlist" />    
</p:dialog>  

I would like to show the dialog only when the validation has passed and the action method is executed. However, when the required input fields are empty and the action method is thus not executed, the dialog is still shown.

How do I display the dialog only on complete of a successful form submit?

Answer 1

The PrimeFaces ajax response puts an args object in the JS scope which has a validationFailed property. You could just check for that in the oncomplete.

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

If you're performing validation in action method instead of in a normal validator, and you can't rework that, then you need to manually call FacesContext#validationFailed().

See also:

• Prevent confirmation dialogue from opening when there's a validation error

---

A different alternative is to use RequestContext#execute() inside action method to programmatically instruct PrimeFaces to execute the given piece of JS code. So, instead of the oncomplete, you could also do this in action method:

RequestContext.getCurrentInstance().execute("dialogaboutDEQ.show()");

If the validation fails, then the action method is not invoked and then this would also not be executed.

See also:

• How to find indication of a Validation error (required="true") while doing ajax command

---

Again a different alternative is to use the dialog's visible attribute. Your command button is apparently updating the whole form including the dialog (even though the dialog is at its own badly declared with appendToBody="true" which would cause it to not be inside the parent form anymore; i.e. it must have appendToBody="false" or have its own form, but ala). You could check e.g. on FacesContext#isPostback() and FacesContext#isValidationFailed() if a successful postback is performed:

<p:dialog ... visible="#{facesContext.postback and not facesContext.validationFailed}">

See also:

• Difference between rendered and visible attributes of <p:dialog>
• How to show a popup in primefaces with the requiredMessages, only if these messages exist?