CODEWITHSUNDEEP
jsfprimefaces
Andres Louis
Andres Louis

Reputation: 45

Validation password doesn't work in p:dialog

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 !

Upvotes: 1

Views: 706

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

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

Upvotes: 2

Related Questions