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. Spring Faces 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.