Using Client Validators with ICEfaces 4.1

ICEfaces 4.1 introduces a new set of client validator components which can be used to perform validation in the browser without the need to first submit the data to the server, thus avoiding server round-trips and providing a more responsive user-experience.

The new validation components are:

Usage Example

<h:body>
    <h:form>
        ...
        // Validate that the entered value is not greater than 10. 
        <ace:textEntry id="textEntry2" value="#{clientValidateValueRangeBean.value2}" 
            label="Input Value " labelPosition="left" size="8">
            <ace:clientValidateValueRange maximum="10" />
        </ace:textEntry>
        ...
        // Validate that the entered value is within the range of 10 to 20.
        <ace:textEntry id="textEntry3" value="#{clientValidateValueRangeBean.value3}" 
            label="Input Value " labelPosition="left" size="8">
            <ace:clientValidateValueRange minimum="10" maximum="20" />
        </ace:textEntry>
        ...
    </h:form>
</h:body>

Validation Behaviour

The client validators exhibit the following behaviors when used:

  • Client validation occurs initially when the component value is attempted to be submitted to the server, either via an ace:ajax partial-submit or a full form submit. If the client validation fails the submit to the server is aborted and the appropriate error message is displayed in an associated ace:message, ace:messages, or ace:growlMessages component (without requiring a server-roundtrip). Thus, a form submit with multiple components is processed atomically and will be completely aborted if any of the components within it fail client validation.
  • Before submitting an entered component value the first time (either via full form submit, or an ace:ajax partial-submit), the user can tab through components in the form without triggering annoying validation messages – they won’t get bugged before having the chance to actually enter a correct value.
  • However, once a component is marked invalid by a previous validation failure, it is eagerly validated: As soon as the user has entered the necessary value, the error message is removed, without requiring a form submit.
  • Client validation supports the “immediate=’true'” attribute on ace:pushButton and ace:linkButton. When “immediate=’true'” the button submit will occur regardless of whether one or more components in the form are failing client validation.

Live Demo

You can see the new client validators in action in the ICEfaces 4.1 Showcase.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

8 + twenty =