Validation failed javascript callback in JSF

Question

I have a template in which I can add a CSS error class to a div when the validation of a component has failed and it renders a pretty nice effect on the browser.

Now

Answer 1

If you want to do everything on the client side.

     <h:outputText class="samplecls" rendered="#{facesContext.validationFailed}"
              value="Please enter all the required fields">
    </h:outputText>  


    <div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
       <label class="control-label">Input value:</label>
       <div class="controls">
          <h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
       </div>
    </div>

Javascript/Jquery

 This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}"


  $(window).load(function(){ 
      if($('.samplecls').length>0){
            $("#ID_OF_DIV").addClass("error_class");    
        }
});

Answer 2

Just let JSF/EL conditionally print the class based on FacesContext#isValidationFailed().

<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}">

You only need to ensure that this element is covered by ajax update/render.

Another way would be hooking on the oncomplete event of an arbitrary PrimeFaces ajax based component. There's an args object available in the scope which in turn has a validationFailed property. E.g. <p:commandButton oncomplete> or even <p:ajaxStatus oncomplete>.

<p:ajaxStatus ... oncomplete="if (args &amp;&amp; args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">