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 Bean Validation constraints and checking them at the client, so no requests are fired when typing values in the fields.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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> <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" alt="ai" style="height:12px;width:12px;" /> </f:facet> </a4j:status> </h:panelGroup> </f:facet> <h:panelGrid columns="3"> <h:outputText value="Name:" /> <h:inputText value="#{validationBean.name}" id="name"> <rich:validator /> </h:inputText> <rich:message for="name" /> <h:outputText value="Email" /> <h:inputText value="#{validationBean.email}" id="email" validatorMessage="bad email"> <rich:validator /> </h:inputText> <rich:message for="email" /> <h:outputText value="Age" /> <h:inputText value="#{validationBean.age}" id="age"> <rich:validator /> </h:inputText> <rich:message for="age" /> <h:outputText value="I agree the terms" /> <h:selectBooleanCheckbox value="#{validationBean.agreed}" id="agreed"> <rich:validator /> </h:selectBooleanCheckbox> <rich:message for="agreed" /> </h:panelGrid> </rich:panel> </h:form> </ui:composition>
package org.richfaces.demo.validation; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.validation.constraints.AssertTrue; import javax.validation.constraints.Max; import javax.validation.constraints.Min; import javax.validation.constraints.Pattern; import javax.validation.constraints.Size; @ManagedBean @RequestScoped public class ValidationBean { @Size(min = 3, max = 12) private String name = null; @Pattern(regexp = "^[\\w\\-]([\\.\\w])+[\\w]+@([\\w\\-]+\\.)+[a-zA-Z]{2,4}$", message = "Bad email") private String email = null; @Min(value = 18) @Max(value = 99) private Integer age; private String country; private String jobTitle; @AssertTrue private boolean agreed = true; public boolean isAgreed() { return agreed; } public void setAgreed(boolean agreed) { this.agreed = agreed; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } public String getJobTitle() { return jobTitle; } public void setJobTitle(String jobTitle) { this.jobTitle = jobTitle; } }
