3 Replies Latest reply on Jun 11, 2009 11:49 AM by Ilya Shaikovsky

    Custom validation with AJAX.

    Mikael Aksamit Newbie

      What I am looking for is to make a method on the serverside do a validation of an input field in the event of blur. The outcome of the validation should be visible as a green/red checkmark next to the input field.

      So far I have experimented with the Live RichFaces demos but haven't been able to tweak it the way I need it to be implemented. Basically I am not interested in the text-cause of validation error, just want a component to show green/red checkmark.

      This trivial example works:

      <h:inputText id="eventInterval" value="#{alarmBean.eventInterval}" required="true" styleClass="inputfield">
       <f:validateLongRange minimum="0" />
       <f:convertNumber integerOnly="true" />
       <rich:ajaxValidator event="onblur" />
      </h:inputText>
      <rich:message for="eventInterval" />
      



      What I am trying to achieve is something like this:

      <h:inputText id="eventInterval" value="#{alarmBean.eventInterval}" required="true" styleClass="inputfield" validator="#{alarmBean.myValidatorForEventInterval}">
       <rich:ajaxValidator event="onblur" reRender="componentHoldingImg" />
      </h:inputText>
      



      Where I would have a method in my backing bean doing all validation checks for that field, update the url to corresponding img. Which would then be re-rendered.

      Any suggestions appreciated.

      // Mike

        • 1. Re: Custom validation with AJAX.
          Ilya Shaikovsky Master

          you could put rich:message and define errors markers and define showSummary/showDetails to false. Then only error marker will be visible.

          And additionally render the image with green mark and rendering condition should be #{facesContext.maximumSeverity==null}

          • 2. Re: Custom validation with AJAX.
            Mikael Aksamit Newbie

            Thanks for your quick response.

            You got me in the right direction and I am almost there, however I still have one small problem to resolve.

            When the input form loads all input fields are empty/null, this is an illegal input and I want the errorMarker to be visible on this condition. However on each initial form load the passedMarker is always displayed instead. Can I somehow force the validation-event to be triggered at initial load of the form?

            <t:div>
             <h:outputText value="#{alarmbundle['alarm.eventinterval']} (#{alarmbundle['alarm.minutes']})" />
             <rich:message for="eventInterval" showSummary="false" showDetail="false">
             <f:facet name="errorMarker">
             <h:graphicImage url="../../images/ajax/error.gif" />
             </f:facet>
             <f:facet name="passedMarker">
             <h:graphicImage url="../../images/ajax/passed.gif" />
             </f:facet>
             </rich:message>
            </t:div>
            
            <h:inputText id="eventInterval" value="#{alarmBean.eventInterval}" styleClass="inputfield" required="true">
             <f:validateLength minimum="1" />
             <f:convertNumber integerOnly="true" />
             <f:validateLongRange minimum="0" />
             <rich:ajaxValidator event="onblur" />
            </h:inputText>
            


            • 3. Re: Custom validation with AJAX.
              Ilya Shaikovsky Master

              yes.. thats why we removed this functionality from component :/ Because it could not be achieved at components level. Seems you need some application level flag about if this components rendered initially or some data was already processed.