<a:form>
    <a:panel header="Validate">
        <h:panelGrid columns="4" cellpadding="5">
            <h:outputLabel for="text" value="Text: (Change)" />
            <a:inputText id="text" value="#{validationView.text}" required="true">
                <f:validateLength minimum="2" maximum="5" />
                <a:clientValidator />
            </a:inputText>
            <a:message for="text" display="icon" />
            <h:outputText value="#{validationView.text}" />

            <h:outputLabel for="integer" value="Integer: (Keyup)" />
            <a:inputText id="integer" value="#{validationView.integer}">
                <a:clientValidator event="keyup"/>
            </a:inputText>
            <a:message for="integer" display="icon" />
            <h:outputText value="#{validationView.integer}" />
        </h:panelGrid>

        <a:commandButton value="Save" ajax="false" icon="ui-icon-check" validateClient="true" />
    </a:panel>
</a:form>