jsf - Keep <p:dialog> open when validation has failed

Question

I have a CRUD page which shows data from a query (a List of domain objects) in a Primefaces datatable.

<p:dataTable 
                id="negozi" 
                var="n" 
                value="#{nController.theListFromQuery}" 
                rowKey="#{n.id}"
                selection="#{nController.selected}" 
                selectionMode="single">

                <p:column headerText="Field1">
                    <h:outputText value="#{n.f1}" />
                </p:column>
                <p:column headerText="Field2">
                    <h:outputText value="#{n.f2}" />
                </p:column>
<p:column style="width:4%">
                    <p:commandButton 
                        actionListener="#{nController.prepareEdit(n)}"
                        update=":editDialogId" 
                        oncomplete="editDialog.show()" 
                        value="Edit" />
                </p:column>
...

By clicking on the edit button a dialog will be shown:

    <p:dialog 
                header="Edit N" 
                widgetVar="editDialog" 
                id="editDialogId">

                    <h:form id="formDialog">

                        <h:panelGrid id="editDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">

                            <p:outputLabel for="field1" value="F1:" />
                            <p:inputText id="field1" value="#{nController.selected.f1}" />
                            <p:outputLabel for="field2" value="F2:" />
                            <p:inputText id="field2" value="#{nController.selected.f2}" />
<p:commandButton 
                        value="Confirm" 
                        actionListener="#{nController.doEdit}" 
                        update=":form" 
                        oncomplete="editDialog.hide()"
                        rendered="#{nController.selected.id!=null}" />                  
...

It works. Now I want to make F1 a required field.

I add the "required" attribute to the inputText field and what happens?

When I try to confirm the form without the required field, the entity is not edited (that's right) but the dialog is closed (that's NOT right!)

When I reopen the dialog I can see the red highlight on the required (and invalid) field.

What I want is to prevent the dialog closing if the form is invalid.

Do I have to write some JS or will JSF help me?

Answer 1

The PrimeFaces ajax response puts an args object in the scope which has a validationFailed property. You could just make use of it.

oncomplete="if (args && !args.validationFailed) PF('editDialog').hide()"

(the args precheck is necessary to not cause a JS error when an exception is thrown during request)

You could refactor it to a reusable JS function as follows.

oncomplete="hideDialogOnSuccess(args, 'editDialog')"

function hideDialogOnSuccess(args, dialogWidgetVar) {
    if (args && !args.validationFailed) {
        PF(dialogWidgetVar).hide();
    }
}