Opening dialog validates the main form what I don't want

Question

If I click on the add button (for example the "CreateCategory1" Id) to add one new product category I get the "Name field is required" validation message. This should open one dialog, where I can enter the new category name, nothing else. At this point I don't want to validate the main form, because I just want to add one new product category, which I will be using later. Why is the dialog opening validating the form? How can I avoid this?

Thank you very much!

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition >
        <h:outputScript library="js" name="warning.js"/>  
        <h:form id="ProductEditForm" target="_blank">
            <div class="ui-fluid">
                <p:panelGrid columns="4" columnClasses="ui-grid-col-6,ui-grid-col-2,ui-grid-col-2,ui-grid-col-2" layout="grid" styleClass="ui-panelgrid-blank" >
                    <p:outputPanel style="height: 70px" >
                        <p:breadCrumb model="#{breadCrumb.productMenuModel}" style="background: inherit; border: none" />           
                        <h2>#{productController.selected.name}</h2>
                    </p:outputPanel>
                    <p:commandButton style="height: 30px; background: #{userController.headerColor}"  icon="ui-icon-check" oncomplete="javascript:saved=true" action="#{productController.update}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Save}" />
                    <p:commandButton style="height: 30px" icon="ui-icon-close" oncomplete="javascript:saved=true"  action="#{productController.refreshSelected()}" actionListener="#{breadCrumb.navigateProduct()}" update=":center,:growl" value="#{bundle.Cancel}"/>
                    <p:commandButton style="height: 30px" icon="ui-icon-document" update="@([id$=ProductHistoryDateForm])" oncomplete="PF('ProuctHistoryDateDialog').show()" value="Print history" disabled="#{empty productController.selected}" />
                </p:panelGrid>
                <p:panelGrid columns="2" columnClasses="ui-grid-col-6,ui-grid-col-6" layout="grid" >
                    <p:panel>
                        <h3>Main info</h3>   
                        <p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
                            <p:outputLabel value="#{bundle.EditProductLabel_name}" for="name" />
                            <p:inputText id="name" value="#{productController.selected.name}" title="#{bundle.EditProductTitle_name}" required="true" requiredMessage="#{bundle.EditProductRequiredMessage_name}"/>
                            <p:outputLabel value="#{bundle.EditProductLabel_originalName}"/>
                            <p:inputText id="originalName" value="#{productController.selected.originalName}"/>
                            <h:outputText value="#{bundle.ViewInventoryItemLabel_serialized}"/>
                            <p:selectBooleanCheckbox disabled="false" value="#{productController.selected.serialized}" />
                            <p:outputLabel value="#{bundle.EditProductLabel_ean}" for="ean" />
                            <p:inputText id="ean" value="#{productController.selected.ean}" title="#{bundle.EditProductTitle_ean}" />
                            <p:outputLabel value="#{bundle.EditProductLabel_itemNr}" for="itemNr" />
                            <p:inputText id="itemNr" value="#{productController.selected.itemNr}" title="#{bundle.EditProductTitle_itemNr}" />
                            ...
                        </p:panelGrid>
                        <h3>Sales</h3>
                        <p:panelGrid columns="2" columnClasses="ui-grid-col-3,ui-grid-col-9" layout="grid" styleClass="ui-panelgrid-blank">
                            <p:outputLabel for="defaultSupplier" value="#{bundle.EditProduct_defaultSupplier}"/>
                            <p:selectOneMenu id="defaultSupplier" filter="true" value="#{productController.selected.defSupplierPartner}" title="#{bundle.EditProduct_defaultSupplier}" effect="fold" editable="false">
                                <f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{partnerController.items}"
                                               var="partnerDataIdItem"
                                               itemValue="#{partnerDataIdItem}"
                                               itemLabel="#{partnerDataIdItem.name}"/>
                            </p:selectOneMenu>
                            <p:outputLabel value="#{bundle.EditProductLabel_purchaseDeliveryTime}" for="purchaseDeliveryTime" />
                            <p:inputText id="purchaseDeliveryTime" value="#{productController.selected.purchaseDeliveryTime}" title="#{bundle.EditProductTitle_purchaseDeliveryTime}" />
                            <p:outputLabel value="#{bundle.EditProductLabel_lastPurchase}" />
                            <p:inputText id="lastPurchase" value="#{productController.selected.lastPurchasePrice}" />
                            ...
                        </p:panelGrid>
                    </p:panel>
                    <p:panel id ="productGroups">
                        <h3>Product categories</h3>
                        <p:panelGrid columns="3" columnClasses="ui-grid-col-1,ui-grid-col-1,ui-grid-col-11" layout="grid" styleClass="ui-panelgrid-blank">

                            <p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>                            
                            <p:commandButton id="DeleteCategory1" disabled="#{productController.selected.productCategoryId1 == null}" update="category1" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId1)}" icon="ui-icon-minus" />   

                            <p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="#{productController.selected.productCategoryId1.name}" effect="fold">
                                <f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{productCategoryController.getItemsByLevel(1)}" 
                                               var="item" 
                                               itemLabel="#{item.name}"/>
                                <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
                            </p:selectOneMenu>
                            <p:commandButton id="CreateCategory2" rendered="#{productController.selected.productCategoryId1 != null}" actionListener="#{productCategoryController.prepareCreate(2)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
                            <p:commandButton id="DeleteCategory2" disabled="#{productController.selected.productCategoryId2 == null}" update="category2" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId2)}" icon="ui-icon-minus" />   

                            <p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="#{productController.selected.productCategoryId2.name}" value="#{productController.selected.productCategoryId2}" effect="fold">
                                <f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{productCategoryController.getItemsByLevel(2)}" 
                                               var="item"                                                   
                                               itemLabel="#{item.name}"/>
                                <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
                            </p:selectOneMenu> 
                            <p:commandButton id="CreateCategory3" rendered="#{productController.selected.productCategoryId2 != null}" actionListener="#{productCategoryController.prepareCreate(3)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/>
                            <p:commandButton id="DeleteCategory3" disabled="#{productController.selected.productCategoryId3 == null}" update="category3" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId3)}" icon="ui-icon-minus" />   

                            <p:selectOneMenu id="category3" label="#{productController.selected.productCategoryId3.name}" rendered="#{productController.selected.productCategoryId2 != null}" value="#{productController.selected.productCategoryId3}" effect="fold">
                                <f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{productCategoryController.getItemsByLevel(3)}" 
                                               var="item"                                                   
                                               itemLabel="#{item.name}"/>
                                <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(3)}"/>
                            </p:selectOneMenu> 
                            <p:commandButton id="CreateCategory4" rendered="#{productController.selected.productCategoryId3 != null}" actionListener="#{productCategoryController.prepareCreate(4)}" update="productGroups, ProductCategoryCreateForm" icon="ui-icon-plus" oncomplete="PF('ProductCategoryCreateDialog').show()"/> 
                            <p:commandButton id="DeleteCategory4" disabled="#{productController.selected.productCategoryId4 == null}" update="category4" actionListener="#{productCategoryController.deleteProductCategory(productController.selected.productCategoryId4)}" icon="ui-icon-minus" />   

                            <p:selectOneMenu id="category4" label="#{productController.selected.productCategoryId4.name}" rendered="#{productController.selected.productCategoryId3 != null}" value="#{productController.selected.productCategoryId4}" effect="fold">
                                <f:selectItem itemLabel="#{bundle.SelectOneMessage}" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{productCategoryController.getItemsByLevel(4)}" 
                                               var="item"                                                   
                                               itemLabel="#{item.name}"/>
                                <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(4)}"/>
                            </p:selectOneMenu> 
                        </p:panelGrid>
                    </p:panel>
                </p:panelGrid>
            </div> 
        </h:form>
    </ui:composition>
</html>

How about with process="@this" on all buttons you dont want to submit the form — Jaqen H'ghar, Sep 24 '19 at 20:49
@JaqenH'ghar: I think OP needs to submit something... So maybe adding other inputs to the `process` is needed — Kukeltje, Sep 25 '19 at 19:48

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

This is NOT a direct answer but a long extensive comment on what is all wrong with this question and how the real problem could simply be narrowed down by making a [mcve]... with a simple answer at the end.

Remove the composition
Remove the h:outputScript
Remove all styling
Remove the structural divs panelGrid and more
Remove 'bundles' from label and make them static
Remove most inputs (leave one in so that it still demonstrates the problem)
Remove most buttons that open a dialog and leave one (the one you referred to) in so that it still demonstrates the problem

What it could look like then

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:form id="ProductEditForm" target="_blank">

        <p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>                            
           
        <p:selectOneMenu id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
            <f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{productCategoryController.getItemsByLevel(1)}" var="item" itemLabel="#{item.name}"/>
            <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
        </p:selectOneMenu>
                           
        <p:selectOneMenu id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}" effect="fold">
            <f:selectItem itemLabel="Select one" itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{productCategoryController.getItemsByLevel(2)}" var="item" itemLabel="#{item.name}"/>
            <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
    </p:selectOneMenu> 

    </h:form>

</html>

You could even make it more simple by using plain p:inputText instead of p:selectOneMenus.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:form id="ProductEditForm" target="_blank">

        <p:commandButton id="CreateCategory1" actionListener="#{productCategoryController.prepareCreate(1)}" update="productGroups, ProductCategoryCreateForm" oncomplete="PF('ProductCategoryCreateDialog').show()"/>                            
           
        <p:inputText id="category1" value="#{productController.selected.productCategoryId1}" label="Category 1">
            <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(1)}"/>
        </p:inputText>
                           
        <p:inputText id="category2" rendered="#{productController.selected.productCategoryId1 != null}" label="Category 2" value="#{productController.selected.productCategoryId2}">

            <p:ajax event="change" update="productGroups" listener="#{productController.changeCategory(2)}"/>
    </p:inputText> 

    </h:form>

</html>

And if the problem still occurs an h:inputText with f:ajax And even an h:commandButton with an f:ajax (changing the oncomplete to onevent) , making it less PrimeFaces dependend (and still causing an error).

But now we come to it... The oncomplete that opens the dialog... Is it actually related to opening the dialog? What if you'd use a simple oncomplete="alert('Hi there');" in the commandButton? Does it fail to? 100% sure it does, so your title

Opening dialog validates the main form what I don't want

and your question

"Why is the dialog opening validating the form?"

Are both wrong... What if you remove the oncomplete completely? Still fails? Yes... Hmmmm... So it is is just related to pressing a button. Well what does a button do? It submits a form... validating it... So effectively your question becomes

"How can I prevent a commandButton from submitting and validating my whole form"

And you could also have come here by starting to remove the oncomplete in the first place, by asking yourself the question related to the title:

"IS it related to opening the dialog? What If I don't open the dialog? Where do I do that? In the oncomplete, so what if I remove that").

If you posted your new question in a search engine and added 'PrimeFaces JSF site:stackoverflow.com' to it, you'd after some reading have found:

PrimeFaces disable validation on cancel button

Which is exactly like stated in the comment. Might not be sufficient (you might need to add some other id to the process attribute of fields you do want to submit with the specific button, but you'd have a more detailed to the point question then.

You could, of course also make more than one form, submitting smaller parts

How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?

Opening dialog validates the main form what I don't want

1 Answers1

Opening dialog validates the main form what I don't want