9 Replies Latest reply on Aug 28, 2007 11:32 AM by grimholtz

    form validation question

    grimholtz

      Section 5.6.7 in the FAQ says forms aren't submitted when there are validation errors. I'd like to use required="true" but not validate the entire form when the user initiates ajax request (e.g., to repopulate items in a h:selectOneMenu with a4j:support). What is the recommended way with ajax4jsf to validate the entire form after submission? Don't use required="true"?

      Thanks,
      grimholtz

        • 1. Re: form validation question

          required="true" is very nice feature. Do no see the reason to avoid it.

          The usual way is limited the processing with a4j:region. If you show you code snippet I can say more.

          • 2. Re: form validation question
            grimholtz

            Thanks for the reply, Sergey. The form is large, so here is a snippet:

            <h:outputLabel for="name" value="#{pwab['name']}"/>
             <h:inputText id="name" value="#{eub.name}" required="true"/>
             <h:message for="name"/>
            
             <h:outputLabel for="typeMenu" value="#{pwab['type']}"/>
             <h:selectOneMenu id="typeMenu" value="#{eub.type}" converter="MyConverter">
             <a4j:support event="onchange" reRender="divForAjax1" action="#{eub.update}"/>
             <f:selectItems value="#{selectItems.types}"/>
             </h:selectOneMenu>
             <h:message for="typeMenu"/>
            
             <h:outputLabel for="platformMenu" value="#{pwab['platform']}" />
             <t:div id="divForAjax1">
             <h:selectOneMenu id="platformMenu" value="#{eub.platform}" converter="MyConverter2">
             <f:selectItems value="#{eub.platforms}"/>
             </h:selectOneMenu>
             </t:div>
             <h:message for="platformMenu"/>


            If user changes typeMenu, platformMenu does not update unless name has a value (as indicated in the FAQ). What's the best way to resolve this? Continuing to use required="true" would be nice, but I could use application-level validation if necessary.

            Thanks,
            grimholtz

            • 3. Re: form validation question

              just surround selectOneMenu id="typeMenu" with a4j:region.

              Also, you h:message tags are not enabled for ajax. I.e. you will not see the error message during the ajax requests. To enable then, surround h:message with
              <a4J:outputPanel ajaxRendered="true">

              • 4. Re: form validation question
                grimholtz

                Thank you, Sergey. That helps with "name" but causes validation errors with other fields. When user submits, platform and experimentType don't pass validation--even though they contain values. Name and other fields work as expected. Here is a screenshot:

                http://img407.imageshack.us/img407/7608/capture827200724532pmha7.png

                Here is the full form with the changes you suggested:

                <h:form id="f1" enctype="multipart/form-data">
                <h:panelGrid columns="3">
                 <h:outputLabel for="name" value="#{pwab['name']}"/>
                 <h:inputText id="name" value="#{eub.name}"required="true"/>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="name"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="description" value="#{pwab['description']}"/>
                 <h:inputTextarea id="description" value="#{eub.description}" required="true"/>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="description"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="platformType" value="#{pwab['platformType']}"/>
                 <a4j:region> <%/* needed to make required="true" work In the other fields */%>
                 <h:selectOneMenu id="platformType" value="#{eub.platformType}"
                 converter="ControlledVocabularyConverter" required="true">
                 <a4j:support event="onchange" reRender="divForAjax1" action="#{eub.update}"/>
                 <f:selectItems value="#{selectItems.platformTypes}"/>
                 </h:selectOneMenu>
                 </a4j:region>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="platformType"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="platform" value="#{pwab['platform']}"/>
                 <t:div id="divForAjax1">
                 <h:selectOneMenu id="platform" value="#{eub.platform}"
                 converter="PlatformConverter" required="true">
                 <f:selectItems value="#{eub.platformsForSelectedType}"/>
                 </h:selectOneMenu>
                 </t:div>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="platform"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="experimentType" value="#{pwab['experimentType']}"/>
                 <h:selectOneMenu id="experimentType" value="#{eub.selectedMeasurementTypeGroup}"
                 converter="MeasurementTypeGroupConverter" required="true">
                 <f:selectItems value="#{selectItems.measurementTypeGroupSelectItems}"/>
                 </h:selectOneMenu>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="experimentType"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="department" value="#{pwab['department']}"/>
                 <h:selectOneMenu id="department" value="#{eub.selectedDepartmentBean}"
                 converter="DepartmentBeanConverter" required="true">
                 <f:selectItems value="#{eub.allDepartments}"/>
                 </h:selectOneMenu>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="department"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="preprocessing" value="#{pwab['preprocessingDescription']}"/>
                 <h:inputTextarea id="preprocessing" value="#{eub.preprocessingDescription}" required="true"/>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="preprocessing"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="filetype" value="#{pwab['filetype']}"/>
                 <h:selectOneMenu id="filetype" value="#{eub.selectedFileType}"
                 converter="FileTypeConverter" required="true">
                 <f:selectItems value="#{eub.possibleFileTypes}"/>
                 </h:selectOneMenu>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="filetype" styleClass="allMessages"/>
                 </a4j:outputPanel>
                
                 <h:outputLabel for="file" value="#{pwab['file']}"/>
                 <t:inputFileUpload id="file" value="#{eub.uploadedFile}"
                 storage="file" required="true"/>
                 <a4j:outputPanel ajaxRendered="true">
                 <h:message for="file"/>
                 </a4j:outputPanel>
                </h:panelGrid>
                <a4j:commandButton value="Upload" action="#{eub.upload}"/>
                </h:form>



                • 5. Re: form validation question

                  what does it mean required="true" for selectOneManu?

                  • 6. Re: form validation question
                    grimholtz

                     

                    "SergeySmirnov" wrote:
                    what does it mean required="true" for selectOneManu?


                    platformType does not need required=true, nor do some of the other selectOneMenus. However, depending on the platformType selection, platform menu can be empty (no SelectItems). In that case, platformType must be changed because platform is required.



                    • 7. Re: form validation question
                      grimholtz

                      That is: platform SelectItems are updated whenever platformType selection changes. Sometimes platform will have no SelectItems in which case user must change platformType to something else. So platform is required. Does that make sense?

                      • 8. Re: form validation question

                        I am lost with your example. Might be a immediate="true" on h:selectOneMenu id="platformType".

                        • 9. Re: form validation question
                          grimholtz

                           

                          "SergeySmirnov" wrote:
                          I am lost with your example. Might be a immediate="true" on h:selectOneMenu id="platformType".

                          Hi Sergey,

                          Here are two screenshots to demonstrate.

                          With SelectItems:
                          http://img516.imageshack.us/img516/6964/capture8282007112730amrr8.png

                          Without SelectItems (if user submits like this, he should get error)
                          http://img249.imageshack.us/img249/9690/capture8282007112743amhq8.png