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

    form validation question

    Eric Jung Newbie

      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
          Sergey Smirnov Master

          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
            Eric Jung Newbie

            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
              Sergey Smirnov Master

              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
                Eric Jung Newbie

                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
                  Sergey Smirnov Master

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

                  • 6. Re: form validation question
                    Eric Jung Newbie

                     

                    "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
                      Eric Jung Newbie

                      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
                        Sergey Smirnov Master

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

                        • 9. Re: form validation question
                          Eric Jung Newbie

                           

                          "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