title: JSF 2: How show different ajax status in same input?
body: <p>I would like to validate every field in my form when each field  lose the focus, when this happens i would like these actions happen:</p>
  
  <p>1) in the right side of the field appears an image, a .gif (to represent that the system is checking the user input)</p>
  
  <p>2) when finished  appears another .gif (which depends of the input, 'sucess.gif' or 'error.gif', for example) and a message on the right side.</p>
  
  <p>I don't want to use popup or something like, the user is gonna lose  usability  and i don't want this.</p>
  
  <p>I'm trying to do something like this, this is what i have done so far:</p>
  
  <pre><code>&lt;h:form id="form"&gt;
      &lt;h:panelGrid columns="3" &gt;
          &lt;h:outputLabel for="first_name" value="First Name:" /&gt;
          &lt;h:inputText id="first_name" value="#{register.bean.firstName}" &gt;
              &lt;f:ajax event="blur" render="m_first_name" /&gt;
          &lt;/h:inputText&gt;
  
          &lt;a4j:status name="ajaxStatus"&gt;
              &lt;f:facet name="start"&gt;
                  &lt;h:graphicImage name="loader.gif" library="images" /&gt;
                  &lt;h:outputText value="Processing ..." /&gt;
              &lt;/f:facet&gt;
          &lt;/a4j:status&gt;
  
          &lt;a4j:commandButton value="Register !" action="#{register.validateName}" status="ajaxStatus" /&gt;
  
      &lt;/h:panelGrid&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>I was searching for some solution on Google and I think </p>
  
  <pre><code>&lt;a:a4j ... &gt;
  </code></pre>
  
  <p>is my best option, because of the <code>onbegin</code> and <code>oncomplete</code> attributes.
  There's some attribute as these in some native tag in JSF 2 ?</p>
  
  <p><strong>UPDATE</strong>:
  @BalusC approach:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt-br"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
      &lt;h:head&gt;
          &lt;title&gt;Insert title here&lt;/title&gt;
  
          &lt;script type="text/javascript"&gt;
  
          function showProgress(data) {
              var inputElement = data.source; // The HTML DOM input element.
              var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
              var messageForInputElement = document.getElementById(inputElement.id + "_message");
  
              switch (ajaxStatus) {
                  case "begin": // This is called right before ajax request is been sent.
                      messageForInputElement.innerHTML = "validating...";
                      break;
  
                  case "complete": // This is called right after ajax response is received.
                      messageForInputElement.innerHTML = "";
                      break;
  
                  case "success": // This is called when ajax response is successfully processed.
                      if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
                          messageForInputElement.innerHTML = "valid!";
                      }
                      break;
              }
          }
          &lt;/script&gt;
  
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
          &lt;h:form id="form"&gt;
              &lt;h:panelGrid columns="3"&gt;
                  &lt;h:outputLabel for="first_name" value="First Name" /&gt;
                  &lt;h:inputText id="first_name" value="#{bean.firstName}" required="true"&gt;
                      &lt;f:ajax event="blur" render="first_name_message" onevent="showProgress" /&gt;
                  &lt;/h:inputText&gt;
                  &lt;h:message id="first_name_message" for="first_name" /&gt;
  
                  &lt;h:panelGroup /&gt;
                  &lt;h:commandButton value="Submit" action="#{register.doSomething}"&gt;
                      &lt;f:ajax execute="@form" render="@form" /&gt;
                  &lt;/h:commandButton&gt;
                  &lt;h:messages globalOnly="true" layout="table" /&gt;
              &lt;/h:panelGrid&gt;
          &lt;/h:form&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my bean:</p>
  
  <pre><code>@ManageBean
  @ViewScope
  ..
  
  public void doSomething(){
      try {
          Thread.sleep(2000);
      } catch (InterruptedException e) {
          e.printStackTrace();
      }
  }
  </code></pre>