Class Highlight

All Implemented Interfaces:
PartialStateHolder, StateHolder, TransientStateHolder, ComponentSystemEventListener, FacesListener, SystemEventListener, SystemEventListenerHolder, EventListener

public class Highlight extends OnloadScript

The <o:highlight> is a helper component which highlights all invalid UIInput components and the associated labels by adding an error style class to them. Additionally, it by default focuses the first invalid UIInput component. The <o:highlight /> component can be placed anywhere in the view, as long as there's only one of it. Preferably put it somewhere in the master template for forms.

 <h:form>
     <h:inputText value="#{bean.input1}" required="true" />
     <h:inputText value="#{bean.input2}" required="true" />
     <h:commandButton value="Submit" action="#{bean.submit}" />
 </h:form>
 <o:highlight />
 

The default error style class name is error. You need to specify a CSS style associated with the class yourself. For example,

 label.error {
     color: #f00;
 }
 input.error, select.error, textarea.error {
     background-color: #fee;
 }
 

You can override the default error style class by the styleClass attribute:

 <o:highlight styleClass="invalid" />
 

You can disable the default focus on the first invalid input element setting the focus attribute.

 <o:highlight styleClass="invalid" focus="false" />
 

Since version 2.5, the error style class will be removed from the input element and its associated label when the enduser starts using the input element.

Author:
Bauke Scholtz
See Also:
  • Field Details

    • COMPONENT_TYPE

      public static final String COMPONENT_TYPE
      The component type, which is "org.omnifaces.component.script.Highlight".
      See Also:
  • Constructor Details

    • Highlight

      public Highlight()
  • Method Details

    • encodeChildren

      public void encodeChildren(FacesContext context) throws IOException
      Visit all components of the current UIForm, check if they are an instance of UIInput and are not UIInput.isValid() and finally append them to an array in JSON format and render the script.

      Note that the FacesContext.getClientIdsWithMessages() could also be consulted, but it does not indicate whether the components associated with those client IDs are actually UIInput components which are not UIInput.isValid(). Also note that the highlighting is been done by delegating the job to JavaScript instead of directly changing the component's own styleClass attribute; this is chosen so because we don't want the changed style class to be saved in the server side view state as it may result in potential inconsistencies because it's supposed to be an one-time change.

      Overrides:
      encodeChildren in class UIComponentBase
      Throws:
      IOException
    • isRendered

      public boolean isRendered()
      This component is per definiton only rendered when the current request is a postback request and the validation has failed.
      Overrides:
      isRendered in class UIComponentBase
    • getStyleClass

      public String getStyleClass()
      Returns the error style class which is to be applied on invalid inputs. Defaults to error.
      Returns:
      The error style class which is to be applied on invalid inputs.
    • setStyleClass

      public void setStyleClass(String styleClass)
      Sets the error style class which is to be applied on invalid inputs.
      Parameters:
      styleClass - The error style class which is to be applied on invalid inputs.
    • isFocus

      public boolean isFocus()
      Returns whether the first error element should gain focus. Defaults to true.
      Returns:
      Whether the first error element should gain focus.
    • setFocus

      public void setFocus(boolean focus)
      Sets whether the first error element should gain focus.
      Parameters:
      focus - Whether the first error element should gain focus.