JSF and Web Flow combine to provide an extensive server-side validation model for your web application, but excessive roundtrips to the server to execute this validation and return error messages can be a tedious experience for your users. The Spring Faces component library provides a number of client-side rich validation controls that can enhance the user experience by applying simple validations that give immediate feedback. Some simple examples are illustrated below. See the Spring Faces taglib docs for a complete tag reference.
Simple client-side text validation can be applied with the
clientTextValidator component:
<sf:clientTextValidator required="true">
<h:inputText id="creditCardName" value="#{booking.creditCardName}" required="true"/>
</sf:clientTextValidator>
This will apply client-side required validation to the child
inputText component, giving the user a clear indicator if
the field is left blank.
Simple client-side numeric validation can be applied with the
clientNumberValidator component:
<sf:clientTextValidator required="true" regExp="[0-9]{16}"
invalidMessage="A 16-digit credit card number is required.">
<h:inputText id="creditCard" value="#{booking.creditCard}" required="true"/>
</sf:clientTextValidator>
This will apply client-side validation to the child
inputText component, giving the user a clear indicator if
the field is left blank, is not numeric, or does not match the given
regular expression.
Simple client-side date validation with a rich calendar popup can
be applied with the clientDateValidator component:
<sf:clientDateValidator required="true" >
<h:inputText id="checkinDate" value="#{booking.checkinDate}" required="true">
<f:convertDateTime pattern="yyyy-MM-dd" timeZone="EST"/>
</h:inputText>
</sf:clientDateValidator>
This will apply client-side validation to the child
inputText component, giving the user a clear indicator if
the field is left blank or is not a valid date.
The validateAllOnClick component can be used to
intercept the "onclick" event of a child component and suppress the
event if all client-side validations do not pass.
<sf:validateAllOnClick>
<sf:commandButton id="proceed" action="proceed" processIds="*" value="Proceed"/> 
</sf:validateAllOnClick>
This will prevent the form from being submitted when the user clicks the "proceed" button if the form is invalid. When the validations are executed, the user is given clear and immediate indicators of the problems that need to be corrected.