6 Replies Latest reply on May 1, 2007 3:36 PM by Sergey Smirnov

    modalPanel and Process Validations step

    John Ruffin Newbie

      I have a custom validator on a t:inputText (validates international phone numbers).

      Problem is: when the validation fails, the modalPanel hangs. The validation error message never shows giving the user a chance to correct it.

      How do I overcome this issue?

      Below are snippets:

      <t:inputText id="cphone" value="#{searchForm.contact.phone}" size="27" maxlength="27">
       <f:validator validatorId="com.ach.util.ValidatorPhoneFax"/>
      </t:inputText>
      ---
      <a4j:commandButton
       value="Save"
       actionListener="#{searchForm.listenerSaveContact}"
       onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"/>
      
      ---
      <rich:modalPanel id="mp1" minHeight="100" minWidth="200" height="100" width="300" zindex="300">
       <f:facet name="header">
       <t:outputText value="Saving CONTACT" />
       </f:facet>
       <t:outputText value="Saving your CONTACT changes to multiple databases!"/>
      </rich:modalPanel>


        • 1. Re: modalPanel and Process Validations step
          Sergey Smirnov Master

          try:

          <a4j:commandButton
           value="Save"
           actionListener="#{searchForm.listenerSaveContact}"
           onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"
           oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"/>


          P.S. I do not see the different between the cases when validation passed or failed. You do Ajax request without reloading the whole page. So, you need to hide the message box explicitly in any case.

          • 2. Re: modalPanel and Process Validations step
            John Ruffin Newbie

            Sorry I didn't show the whole picture. The commandButton has a action attribute defined. So, if validation passes then the action navigation proceeds.

            The inputText with id="cphone" has a

            <t:message for="cphone" errorClass="error" />


            Adding
            oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"

            to the commandButton does hide the modalPanel. However, the validation message for "cphone" doesn't show.

            • 3. Re: modalPanel and Process Validations step
              Sergey Smirnov Master

              I do not see the action. How you process the navigation without it?
              Also, I do not see <h:messages /> or <h:message for="..." /> in your snippet. So, can say nothing about the error message yet.

              • 4. Re: modalPanel and Process Validations step
                John Ruffin Newbie

                Ok, here is everything:

                <t:panelGroup>
                 <t:inputText id="cphone" value="#{searchForm.contact.phone}" size="27" maxlength="27">
                 <f:validator validatorId="com.ach.util.ValidatorPhoneFax"/>
                 </t:inputText>
                 <t:outputText value="ex. +000 000000-0000 x0000" styleClass="instructions"/>
                 <t:htmlTag value="br"/>
                 <t:message for="cphone" errorClass="error" />
                </t:panelGroup>
                ...
                <rich:modalPanel id="mp1" minHeight="100" minWidth="200" height="100" width="300" zindex="300">
                 <f:facet name="header">
                 <t:outputText value="Saving CONTACT" />
                 </f:facet>
                 <t:outputText value="Saving your CONTACT changes to CDM and to the AS400!"/>
                </rich:modalPanel>
                ...
                <a4j:commandButton
                 value="Save"
                 actionListener="#{searchForm.listenerSaveContact}"
                 action="toContacts"
                 onclick="Richfaces.showModalPanel('contactsForm:mp1', {top:200, left:200})"
                 oncomplete="Richfaces.hideModalPanel('contactsForm:mp1')"/>
                


                Given: cphone will fail the validator.
                I click the commandButton, the modalPanel displays, the modalPanel hides, the same page displays without the validation message.

                If I make cphone pass validation, I proceed based on action="toContacts" .

                • 5. Re: modalPanel and Process Validations step
                  John Ruffin Newbie

                  Here is the validate method

                  public void validate(FacesContext arg0, UIComponent arg1, Object arg2)
                   throws ValidatorException {
                  
                   Pattern pattern = Pattern.compile("^((\\+\\d{1,3}(-| )?\\(?\\d\\)?(-| )?\\d{1,3})|(\\d{2,3}))(-| )?(\\d{3,4})(-| )?(\\d{4})(( x)\\d{1,5}){0,1}$" );
                   Matcher matcher = pattern.matcher(arg2.toString());
                  
                   boolean patternGood = false;
                   while (matcher.find()){
                  
                   patternGood = true;
                   }
                   if (!patternGood){
                   FacesMessage message = new FacesMessage("Invalid format for a phone/fax number");
                   message.setSeverity(FacesMessage.SEVERITY_ERROR);
                   throw new ValidatorException(message);
                   }


                  • 6. Re: modalPanel and Process Validations step
                    Sergey Smirnov Master

                    This is another story. Do not miss some important details next time.

                    So,

                    replace

                    <t:message for="cphone" errorClass="error" />
                    with
                    <a4j:outputPanel ajaxRendered="true">
                     <t:message for="cphone" errorClass="error" />
                    </a4j:outputPanel>


                    Do not forget to define for your "toContacts" navigation case.