rich:messages is an extension for a standard h:messages component. In addition to what the standard component provides, rich:messages:

• does not require to be wrapped with a4j:outputPanel in order to be rendered during the Ajax requests
• allows to define different "failed" markers before the text labels
• has a predefined css class names for different kinds of messages severities

The message markers is defined with facets. There are several facets names available to design the marker for different kind of messages severities. The following example shows how the markers might be used to mark the "passed" and "failed" form fields. Fill the form and click the "Validate" button to see the entered data passing the defined validation rules.

Form validation using rich:messages example

Validation Form

Name:
Job:
Address:
Zip:

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    
        <style type="text/css">
            .rich-messages-marker img {padding-right:7px;}
            .rich-message-label {color:red;}
            .top {vertical-align:top;}
        </style>        
            
            
        <rich:panel style="width:400px">
            <f:facet name="header">
                <h:outputText value="Validation Form"/>
            </f:facet>

            <h:form>
                <rich:messages passedLabel="Data is allowed to be stored." layout="list">
                    <f:facet name="header">
                        <h:outputText value="Entered Data Status:"></h:outputText>
                    </f:facet>
                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/images/ajax/passed.gif" /> 
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/images/ajax/error.gif" />   
                    </f:facet>
                </rich:messages>

                <h:panelGrid columns="2">
                    <h:outputText value="Name:" />
                    <h:inputText label="Name" id="name" required="true" value="#{userBean.name}">
                        <f:validateLength minimum="3"  />
                    </h:inputText>
                    <h:outputText value="Job:" />
                    <h:inputText label="Job" id="job" required="true" value="#{userBean.job}">
                        <f:validateLength minimum="3" maximum="50"  />
                    </h:inputText>
                    <h:outputText value="Address:" />
                    <h:inputText label="Address" id="address" required="true" value="#{userBean.address}">
                        <f:validateLength minimum="10" />
                    </h:inputText>
                    <h:outputText value="Zip:" />
                    <h:inputText label="Zip" id="zip" required="true" value="#{userBean.zip}">
                        <f:validateLength minimum="4" maximum="9"  />
                    </h:inputText>
                    <f:facet name="footer">
                        <a4j:commandButton value="Validate" />
                    </f:facet> 
                </h:panelGrid>
            </h:form>
        </rich:panel>
</ui:composition>

<<Hide Source