Primefaces: Two mesages getting displayed instead of one for ajax blur event

[Raghu Sundar]

I have one row editable datatable.I have implemented email validation to one of the column where error message must display on blur of email field.This is working fine.I have a dialog with form to be displayed in the same page .Validation is implemented to this form also with on blur event.The dialog validation message gets displayed on blur but along with that the main form also displays the same validation message.This should not happen.

Any idea on how to fix this problem?

JSF page

<h:form id="lpcForm">

    <div id="content">

        <p:commandLink id="cmdLinkDelete" value="Delete"
            style="font-size:15px;padding-left:15px;" ajax="true"
            action="#{lpcBean.deleteRecords}" update=":lpcForm:lpcDataTable" />
          
        <p:commandLink id="cmdLinkAdd" value="Add" style="font-size:15px;"
            onclick="dlg.show()" />


        <p:messages id="lpcInfoMsg" for="lpcInfoMessages" showDetail="true"
            autoUpdate="true" closable="true" />
        <p:messages id="lpcErrMsg" showDetail="false" redisplay="false"
            styleClass="messagesClass" autoUpdate="true" closable="true" />

        <p:dataTable var="lpcData" id="lpcDataTable" widgetVar="lpcTable"
            value="#{lpcBean.lpcItems}" selection="#{lpcBean.selectedRows}"
            editable="true" scrollable="true" scrollWidth="80%"
            rowKey="#{lpcData.LPCID}" rendered="true"
            scrollHeight="75% important!" resizableColumns="true"
            tableStyle="table-layout:auto;width:100% important!; height:100% important!;padding-left:15px important!;"
            styleClass="datatable">

            <p:ajax event="rowEdit" listener="#{lpcBean.onEdit}" />
            <p:ajax event="rowEditCancel" listener="#{lpcBean.onCancel}" />
            <p:column selectionMode="multiple" style="width:15px" />


            <p:column headerText="LPC ID" style="width:20px"
                sortBy="#{lpcData.LPCID}">
                <h:outputText value="#{lpcData.LPCID}" />
            </p:column>



            <p:column headerText="Email" style="width:75px"
                sortBy="#{lpcData.email_Address}">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{lpcData.email_Address}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{lpcData.email_Address}" style="width:100%"
                            label="emailAddress" validatorMessage="Invalid Email Format">
                            <f:validateRegex
                                pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                            <f:ajax event="blur" render=":lpcForm:lpcErrMsg" />
                        </p:inputText>
                    </f:facet>
                </p:cellEditor>
            </p:column>
                .
                .
                .
                .
                .

            <p:column style="width:10px">
                <p:rowEditor />
            </p:column>

        </p:dataTable>
        <p:blockUI block="lpcDataTable" trigger="cmdLinkDelete,cmdLinkAdd">  
    LOADING<br />
            <p:graphicImage value="/images/ajaxLoader.gif" />
        </p:blockUI>

    </div>
</h:form>


<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
    appendToBody="true" resizable="true" modal="true">
    <h:form id="addLpc">

        <div align="center">

            <p:messages id="lpcDlgMsg"  showDetail="false"
                autoUpdate="true" closable="true" />
            <h:panelGrid id="addLpcForm" columns="2" appendToBody="true">

                <h:outputText value="LPC ID" />
                <p:inputText id="lpcId" value="#{lpcBean.lpcId}" required="true">
                    <f:ajax event="blur" render="lpcDlgMsg" />
                </p:inputText>
                .
                .
                .
                .
                .
            </h:panelGrid>
        </div>
        <div align="center">
            <p:commandButton id="submitButton" value="Submit" ajax="true"
                update=":lpcForm:lpcDataTable" action="#{lpcBean.formSubmit}"
                oncomplete="dlg.hide()" />
            <p:commandButton id="cancelButton" value="Cancel" ajax="true"
                onclick="dlg.hide()" />

        </div>
    </h:form>
</p:dialog>

The message with id lpcErrMsg is the one that i am displaying on blur in the main page when email format is wrong.And this message gets displayed with dialog field validation also although i have never referred to this id to be rendered in the dialog.

The message with id lpcDlgMsg is the message that i am displaying inside the dialog with widgetvar dlg on blur.As of now i have implemented blur event validation for the first required field in the dialog.

[Tim Holloway]

I propably didn't read that correctly. The longer the sample, the lazier I get, which is why it's a good idea to strip down examples to their basics.

However, what I think is going on is this:

Firstly, an AJAX element does a form submit, subject to the usual JSF rules. Meaning that for whatever fields the form contains, ALL submitted fields MUST be valid or nothing works. With AJAX the effective number of fields in the submitted form can be adjusted (for example, to only submit the email field itself), but I can't remember what the defaults are on that tag, so I recommend that you check the official docs to make sure you're doing it the way you need to.

In the case of a commandButton, the ENTIRE form is submitted and instead of partial page rendering, you get a full-page render of the response. And, as before, ALL fields on the form must be valid or the submit is rejected.

I don't use AJAX for Cancel buttons normally. The stock h:commandButton with "immediate=true" works pretty much the same way. You should verify that "onclick" isn't supposed to return a value. I know that the "submit=" attribute must return true or false because returning false suppresses the actual submit part of the button operation.