omnifaces

 - 

Available since OmniFaces 1.0

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.

This showcase application has the following CSS configured for the purpose: 

 label.error {
     color: #c66;
 }

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

Please fill out all of those fields.

Of course, don't fill them in order to see the <o:highlight> in action.
Demo source code
<h:form>
    <h3>Please fill out all of those fields.</h3>
    <p>Of course, don't fill them in order to see the <code>&lt;o:highlight&gt;</code> in action.</p>

    <h:panelGrid columns="3">
        <o:outputLabel for="input1" value="Foo" />
        <h:inputText id="input1" required="true" />
        <h:message for="input1" />

        <o:outputLabel for="input2" value="Bar" />
        <h:inputText id="input2" required="true" />
        <h:message for="input2" />

        <o:outputLabel for="input3" value="Baz" />
        <h:inputText id="input3" required="true" />
        <h:message for="input3" />

        <h:panelGroup />
        <h:commandButton value="submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>

<o:highlight /> <!-- Note: just for demo, another one is already included in showcase.xhtml template. -->
Documentation & Sources

VDL documentation

API documentation

Java source code

JavaScript source code