How to only show dialog after successfully validated text field - jsf

Question

So I have form with 1 fields that need to be required
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form" onclick="displayDlg.show();"/>
</h:form>
<p:dialog header="Dialog" widgetVar="displayDlg" id="dialog">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
So when I click button Test, and not having anything inside the text-box, then an error message pop out.
I want that if the validation process success, then I want to display a dialog box that display name that you just type in. But if validation fail, then dont diplay the dialog. And I have a hard time making this happen. I try to put the dialog inside or outside the dialog, but no work. Please give me some advice

Answer 1

You could make use of the visible attribute of <p:dialog> and ajax-update the whole dialog.
<h:form id="form">
<h:panelGrid columns="2">
<h:inputText id="default" requiredMessage="This field is required."
value="#{displayName.name}" required="true" />
<p:message for="default"/>
</h:panelGrid>
<p:commandButton value="Test" update="form :dialog" />
</h:form>
<p:dialog id="dialog" header="Dialog" visible="#{not empty displayName.name}">
<h:outputText value="The name you just input is: #{displayName.name}"/>
</p:dialog>
Additional benefit of having :dialog in the update is that it will update the entered name as well everytime you change it.