12.8. Enhancing The User Experience With Rich Web Forms
Prev | 12. JSF Integration | Next

## 12.8. Enhancing The User Experience With Rich Web Forms

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.

### Validating a Text Field

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.

### Validating a Numeric Field

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.

### Validating a Date Field

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.

### Preventing an Invalid Form Submission

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"/>&#160;
    </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.

Prev | Up | Next
12.7. Handling JSF Events With Spring Web Flow | Home | 12.9. Third-Party Component Library Integration