6 Replies Latest reply on Aug 25, 2012 10:23 AM by Sergey Morenets

    Validation for popupPanel

    Sergey Morenets Novice

      Hi

       

      I assume this answer was reviewed a lot of times. However my concrete sample doesn't work properly.

      I have a popupPanel with input fields. I want to validate fields before submit and show error messages if some errors occurred.

      The popupPanel shouldn't be closed in that case. However my popupPanel closes even if there are validation errors.

       

      RichFaces 4.2.2

      JSF 2.1

       

      <a4j:commandButton render="studyWindow"
      oncomplete="#{rich:component('studyWindow')}.show()"
      value="#{msg['buttons.add']}">
      </a4j:commandButton>

       

      <rich:popupPanel id="studyWindow" autosized="true" width="350">
      <h:form id="fieldForm">
      <h:messages id="error" />

       

      <h:panelGrid columns="2" styleClass="label left">
      <h:outputText value="#{msg['study.years']}" />
      <h:inputText value="#{currentStudy.startYear}" size="6">
      <f:validator validatorId="numericValidator" />
      <f:attribute name="validationMessage"
      value="#{msg['study.startyear.invalid']}" />
      </h:inputText>
      </h:panelGrid>
      <a4j:commandButton
      render="educationPanel"
      action="#{accountController.saveStudy(currentStudy, account)}"
      oncomplete="windowclose();" value="#{msg['buttons.save']}" />
      </h:form>
      </rich:popupPanel>
      <script type="text/javascript">
      function windowclose() {

      if(#{facesContext.maximumSeverity==null}) {

       

      }                                                                   #{rich:component('studyWindow')}.hide();

      }

      </script>

        • 1. Re: Validation for popupPanel
          iabughosh Master

          Hello Morenets,

          i suggest you do the following :

           

          <h:form id="mainForm">

               your page code

          </h:form>

          <h:form id="popupForm">

               <rich:popupPanel id="yourPopupId" domElementAttachment="form">

                    ....

               </rich:popupPanel>

          </h:form>

           

          give it a try,

           

          regards.

          • 2. Re: Validation for popupPanel
            Sergey Morenets Novice

            Hi, thank  you for the small hint. Unfortunately the modal panel still closes even if validation fails.

             

            Here is a4j:log

             

            debug[16:14:52.867]: New request added to queue. Queue requestGroupingId changed to fieldForm:j_idt1065

            debug[16:14:52.868]: Queue will wait 0ms before submit

            debug[16:14:52.869]: richfaces.queue: will submit request NOW

            info [16:14:52.872]: Received 'begin' event from <input id=fieldForm:j_idt1065 ...>

            info [16:14:53.029]: Received 'beforedomupdate' event from <input id=fieldForm:j_idt1065 ...>

            debug[16:14:53.031]: Server returned responseText: <?xml version='1.0' encoding='UTF-8'?> <partial-response><changes><update id="javax.faces.ViewState"><![CDATA[e110s1]]></update><extension id="org.richfaces.extension"><complete>windowclose();;</complete></extension></changes></partial-response>

            info [16:14:53.033]: Listing content of response changes element:

            Element update for id=javax.faces.ViewState

            <update id="javax.faces.ViewState"><![CDATA[e110s1]]></update>

            Element extension for id=org.richfaces.extension

            <extension id="org.richfaces.extension"><complete>windowclose();;</complete></extension>

            debug[16:14:54.208]: richfaces.queue: ajax submit successfull

            debug[16:14:54.209]: richfaces.queue: Nothing to submit

            info [16:14:54.210]: Received 'success' event from <input id=fieldForm:j_idt1065 ...>

            info [16:14:54.211]: Received 'complete' event from <input id=fieldForm:j_idt1065 ...>

            • 3. Re: Validation for popupPanel
              iabughosh Master

              could you add rich:messages to your forms, lets see if it shows anything.

              • 4. Re: Validation for popupPanel
                Sergey Morenets Novice

                Hi, rich:messages component shows error messages but popup panel still closes.

                 

                a4j:log

                 

                debug[16:50:35.804]: New request added to queue. Queue requestGroupingId changed to fieldForm:j_idt941

                debug[16:50:35.806]: Queue will wait 0ms before submit

                debug[16:50:35.808]: richfaces.queue: will submit request NOW

                info [16:50:35.810]: Received 'begin' event from <input id=fieldForm:j_idt941 ...>

                info [16:50:35.965]: Received 'beforedomupdate' event from <input id=fieldForm:j_idt941 ...>

                debug[16:50:35.966]: Server returned responseText: <?xml version='1.0' encoding='UTF-8'?> <partial-response><changes><update id="fieldForm:j_idt1062"><![CDATA[<span class="rf-msgs " id="fieldForm:j_idt1062"><span class="rf-msgs-err" id="fieldForm:j_idt1062:fieldForm:j_idt939"><span class="rf-msgs-sum">fieldForm:j_idt939: Validation Error: Value is required.</span></span></span>]]></update><update id="javax.faces.ViewState"><![CDATA[e120s1]]></update><extension id="org.richfaces.extension"><complete>windowclose();;new RichFaces.ui.Message(&quot;fieldForm:j_idt1062&quot;,{&quot;isMessages&quot;:true} );</complete></extension></changes></partial-response>

                info [16:50:35.969]: Listing content of response changes element:

                Element update for id=fieldForm:j_idt1062

                <update id="fieldForm:j_idt1062"><![CDATA[<span class="rf-msgs " id="fieldForm:j_idt1062"><span class="rf-msgs-err" id="fieldForm:j_idt1062:fieldForm:j_idt939"><span class="rf-msgs-sum">fieldForm:j_idt939: Validation Error: Value is required.</span></span></span>]]></update>

                Element update for id=javax.faces.ViewState

                <update id="javax.faces.ViewState"><![CDATA[e120s1]]></update>

                Element extension for id=org.richfaces.extension

                <extension id="org.richfaces.extension"><complete>windowclose();;new RichFaces.ui.Message("fieldForm:j_idt1062",{"isMessages":true} );</complete></extension>

                debug[16:50:37.089]: richfaces.queue: ajax submit successfull

                debug[16:50:37.091]: richfaces.queue: Nothing to submit

                info [16:50:37.093]: Received 'success' event from <input id=fieldForm:j_idt941 ...>

                info [16:50:37.095]: Received 'complete' event from <input id=fieldForm:j_idt941 ...>

                • 5. Re: Validation for popupPanel
                  iabughosh Master

                  please post your xhtml after modifications.

                  • 6. Re: Validation for popupPanel
                    Sergey Morenets Novice

                    After few attempts I figured out what was the issue root.

                     

                    The script at the page bottom wasn't rendered after Ajax request. So facesContext.maximumSeverity remained unchanged.

                    There are two solutions:

                     

                    1) Either move contents of the windowclose function into oncomplete field of commandButton

                     

                    2) Or surround script with dynamically updated component:

                     

                    <a4j:outputPanel ajaxRendered="true">

                        <script type="text/javascript">

                        function windowclose() {

                             if(#{facesContext.maximumSeverity==null}) {

                                  #{rich:component('studyWindow')}.hide();

                    }}

                    </script>

                    </a4j:outputPanel>

                     

                    By the way, the approach described below doesn't work because fieldForm:error is always present in the component tree now.

                    https://community.jboss.org/wiki/ModalPanelValidation

                     

                         if(document.getElementById('fieldForm:error') == null) {
                              #{rich:component('studyWindow')}.hide();

                    }