CODEWITHSUNDEEP
jsfjsf-2primefaces
Thang Pham
Thang Pham

Reputation: 38705

How to only show dialog after successfully validated text field

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

Upvotes: 2

Views: 3673

Answers (1)

BalusC
BalusC

Reputation: 1108632

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.

Upvotes: 2

Related Questions