The RichFaces Client Validation feature allows you to have true client side validation without writing a single line of JavaScript!
The standard JSF validators and JSR-303 (bean validation) constraints will be available on the client side just by adding <rich:validator/> to the desired inputs. If you are using any custom validators or extensions such as from hibernate an Ajax fallback mechanism will be used triggered. This will be basically seamless to the user, as an Ajax request will handle that specific validation. In future versions we plan to implement additional extensions such as these including custom client side validation. The behavior will try to execute all client validators available and then send an Ajax request to get results from server side if needed.
In this example we are using standard JSF validators and notice that no requests are fired when typing values in these fields.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <h:form id="form"> <rich:panel> <f:facet name="header"> <h:panelGroup> <h:outputText value="User information" /> <a4j:status> <f:facet name="start"> <h:graphicImage value="/images/ai.gif" style="height:12px;width:12px;" alt="ai" /> </f:facet> </a4j:status> </h:panelGroup> </f:facet> <h:panelGrid columns="3"> <h:outputText value="Name:" /> <h:inputText value="#{userBean.name}" id="name" label="name"> <f:validateLength minimum="3" maximum="8" /> <f:validateRequired /> <rich:validator /> </h:inputText> <rich:message for="name" /> <h:outputText value="Email" /> <h:inputText value="#{userBean.email}" id="email" validatorMessage="Validation Error: Invalid email address"> <f:validateRegex pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$" /> <rich:validator /> </h:inputText> <rich:message for="email" /> <h:outputText value="Age" /> <h:inputText value="#{userBean.age}" id="age" label="age"> <f:validateLongRange minimum="18" maximum="99" /> <rich:validator /> </h:inputText> <rich:message for="age" /> </h:panelGrid> </rich:panel> </h:form> </ui:composition>
