o

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.