Geek Answers Handbook

JSF: validating javascript callback

I have a template in which I can add the CSS error class to the div when the component check did not work, and it has a pretty nice effect on the browser.

Now I do not need to add the css class to the component ( this will not help me), but rather I need to change the css html that surrounds it, it is quite simple with jQuery, however I can not find the javascript answer for the failed check, is this possible? I also use simple fonts (if they provide such features).

Markup:

<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>

if the input text is empty, I need a div that wraps a “control group” in order to have an extra class. I can turn it into <h:panelGroup> , so this is a JSF component, but still I don't know how to do it. Javascript seems simpler than I can:

 jQuery("#ID_OF_DIV").addClass("error_class")
+6
source share
2 answers

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

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

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

Another way would be to bind to the oncomplete event for an arbitrary component based on PrimeMaces ajax. An args object is available in the object, which in turn has a validationFailed property. For instance. <p:commandButton oncomplete> or even <p:ajaxStatus oncomplete> .

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

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"); } });
+1
source

More articles:


All Articles