title: Applying CSS dynamically when message appears JSF + JavaScript
body: <p>I'm having a problem to apply dynamically a css in a component using JavaScript or jQuery. I tried some things as showing below.</p>
  
  <p>This is my Component which I'm trying apply the CSS</p>
  
  <pre><code>&lt;p:inputText id="txtUser" styleClass="form-control"
                                   value="#{registerMB.user.name}"
                                   disabled="#{registerMB.disabledUserDetailsBoolean}"
                                   requiredMessage="Por favor insira um Utilizador(NAME)."
                                   onblur="value=value.toUpperCase()"&gt;
                          &lt;p:ajax event="blur" listener="#{registerMB.showUserDetails()}"
                                  update="frmRegisterUser:accordion:results  frmRegisterUser:panelButton button"  /&gt;
                      &lt;/p:inputText&gt;
  </code></pre>
  
  <p>This is the component I'm trying to catch the message:</p>
  
  <pre><code>&lt;p:messages id="messages" autoUpdate="true" showDetail="false" closable="true" /&gt;
  
  </code></pre>
  
  <p>In the browser after compile the HTML I have this element</p>
  
  <pre><code>&lt;div class="ui-messages-error ui-corner-all"&gt;&lt;a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;"&gt;&lt;span class="ui-icon ui-icon-close"&gt;&lt;/span&gt;&lt;/a&gt;&lt;span class="ui-messages-error-icon"&gt;&lt;/span&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span class="ui-messages-error-summary"&gt;Nome do Solicitante inválido!&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>I'm triyng apply the CSS <b>ui-state-error</b> on the component with id <b>txtUser</b> when the message <b>Nome do Solicitante inválido!</b> appears on the screen. I tried this code but I didn't have success. Follow my JQuery:</p>
  
  <pre><code>function checkName() {
  
     var txt = $(".ui-messages-error-summary" )[0].innerText;
     $(txt.replace(/^[ \t]+/gm, ''));
  
      if($(txt).is(':contains("Nome do Solicitante inválido!")')){
      $('#frmRegisterUser:accordion:txtUser').addClass('ui-state-error')
      }
  }
  
  </code></pre>
  
  <p>Thanks for your time.</p>