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

• 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 message severities

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

Form validation using rich:message 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-message-marker img {
                padding-right:7px;
            }
            .rich-message-label {
                color:red;
            }
        </style>        
            
            
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Validation Form"/>
            </f:facet>
            
            <h:form>
                <h:panelGrid columns="3">
                    <h:outputText value="Name:" />
                    <h:inputText label="Name" id="name" required="true" value="#{userBean.name}">
                        <f:validateLength minimum="3"  />
                    </h:inputText>
                    <rich:message for="name">
                        <f:facet name="errorMarker">
                            <h:graphicImage value="/images/ajax/error.gif" />   
                        </f:facet>
                    </rich:message>
                    
                    <h:outputText value="Job:" />
                    <h:inputText label="Job" id="job" required="true" value="#{userBean.job}">
                        <f:validateLength minimum="3" maximum="50"  />
                    </h:inputText>
                    <rich:message for="job">
                        <f:facet name="errorMarker">
                            <h:graphicImage  value="/images/ajax/error.gif" />  
                        </f:facet>
                    </rich:message>
                    <h:outputText value="Address:" />
                    <h:inputText label="Address" id="address" required="true" value="#{userBean.address}">
                        <f:validateLength minimum="10" />
                    </h:inputText>
                    <rich:message for="address">
                        <f:facet name="errorMarker">
                            <h:graphicImage  value="/images/ajax/error.gif" />  
                        </f:facet>
                    </rich:message>
                    <h:outputText value="Zip:" />
                    <h:inputText label="Zip" id="zip" required="true" value="#{userBean.zip}">
                        <f:validateLength minimum="4" maximum="9"  />
                    </h:inputText>
                    <rich:message for="zip">
                        <f:facet name="errorMarker">
                            <h:graphicImage value="/images/ajax/error.gif" />   
                        </f:facet>
                    </rich:message>
                    <f:facet name="footer">
                        <a4j:commandButton value="Validate" />
                    </f:facet>
                </h:panelGrid>
            </h:form>
        </rich:panel>
    
    
</ui:composition>

<<Hide Source