Validation password doesn't work in p:dialog

Question

I'm using PrimeFaces 4.0 and I'm trying to use a dialog to change password. I used password component to do this job It does n't work in a dialog but It works fine when I'm not using Dialog.

Here is my code

<h:form>
    <p:dialog widgetVar="changePw" resizable="true" appendTo="@(body)"
              modal="true" closable="false" id="changePw">

        <p:panel header="change password">

            <p:messages id="messages" showDetail="true" showSummary="false"
                        autoUpdate="true" />
            <h:panelGrid columns="2" id="matchGrid">
                <h:outputLabel for="pwdNew" value="New: *" />
                <p:password id="pwdNew" value="#{passwordBean.newPw}" feedback="true"
                            match="pwdConf" required="true"
                            validatorMessage="Pw does n't matches"
                            requiredMessage="Value required">
                </p:password>

                <p:messages showDetail="true" showSummary="false" autoUpdate="true"
                            for="pwdNew" />

                <h:outputLabel for="pwdConf" value="Confirm Password: *" />
                <p:password id="pwdConf" value="#{passwordBean.newPwConfirmation}"
                            feedback="true" required="true"
                            validatorMessage="invalid password"
                            requiredMessage="Value required">
                    <f:validateRegex pattern="[A-Za-z0-9]{8,60}" />
                </p:password>
            </h:panelGrid>
        </p:panel>

        <p:separator></p:separator>
        <p:commandButton value="Save" update="matchGrid"
                         process="@this" ajax="true"
                         actionListener="#{passwordBean.changePw}"
                         styleClass="ui-confirmdialog-yes" 
                         oncomplete="changePw.hide();"
                         icon="ui-icon-check" />

        <p:commandButton value="Cancel" process="@this"
                         onclick="changePw.hide();" styleClass="ui-confirmdialog-no"
                         icon="ui-icon-close" />
    </p:dialog>

    ...

Thank for any suggestion !

Kukeltje · Accepted Answer · 2015-04-01T20:33:30.060

2

If you use a 'appendTo="@(body)"', you need a form IN the dialog as can be read in the PrimeFaces documentation. But make sure that it is in the original xhtml NOT nested!

In addition, the process="@this" on the buttons prevent the other inputs to be submitted (this also won't work outside the dialog, so you most likely did not have that there). So remove that as well

edited Apr 01 '15 at 20:33

answered Apr 01 '15 at 12:14

Kukeltje

12,223
4
24
47

thank you for your answer I added a form in my dialog by I still have the same problem. I don't inderstand why it works fine outside a dialog – Andres Louis Apr 01 '15 at 13:42
Make sure you *don't* have nested forms... (check if you also have an open/close form tag around your dialog *somewhere*) – Kukeltje Apr 01 '15 at 13:45
The values do get submitted? Check browser logs/console/network etc... and also try to update your `messages` explicitly from the commandbuttons – Kukeltje Apr 01 '15 at 14:14
The values are n't submitted and if I remove process="@this" the listener is not called – Andres Louis Apr 01 '15 at 14:33
I missed the process="@this". Having that outside the dialog wil allso make if fail... If the listener is not called then there could be validation errors or whatever... Check http://stackoverflow.com/questions/2118656/commandlink-commandbutton-ajax-backing-bean-action-listener-method-not-invoked/ – Kukeltje Apr 01 '15 at 14:45
adding a form in the dialog and removing process="@this" solved the problem thanks – Andres Louis Apr 01 '15 at 15:21

Validation password doesn't work in p:dialog

1 Answers1