• cdi
  • components
  • contexts
  • converters
  • eventlisteners
  • exceptionhandlers
  • facesviews
  • filters
  • functions
  • managedbeans
  • renderkits
  • resourcehandlers
  • scripts
  • taghandlers
  • utils
  • validators
-
  • cache
  • commandScript
  • componentIdParam
  • conditionalComment
  • deferredScript
  • form
  • highlight
  • messages
  • onloadScript
  • outputFormat
  • outputLabel
  • param
  • resourceInclude
  • tree
  • viewParam

Description

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.

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


label.error {
    color: #c66;
}

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

The default style class name is error and this can be changed as follows:


<o:highlight styleClass="invalid" />
		
Demo

Please fill out all of those fields.

Of course, don't fill them in order to see the <o:highlight> in action.

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