Client Side Validation

Client Side Validation Framework implements JSF validation API within the browser.

  • Compatible with Server Side Implementation.
  • Conversion and Validation happens at client side.
  • Partial Processing support for Ajax.
  • I18n support along with component specific messages.
  • Client side Renderers for message components.
  • Easy to write custom client converters and validators.
  • Global or Component based enable/disable.
  • Little footprint using HTML5.
  • Advanced Bean Validation Integration.
Validate

Source

<h:form>
                
    <p:panel header="Validate">
        <p:messages autoUpdate="true"/>

        <h:panelGrid id="grid" columns="4" cellpadding="5">
            <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>					
            <p:inputText id="name" value="" required="true" label="Name"/>
            <p:message for="name" />
            <h:outputText value="" />

            <h:outputLabel for="number" value="Number:" style="font-weight:bold"/>					
            <p:inputText id="number" value="" label="Number">
                <f:validateDoubleRange minimum="5" maximum="8" />
            </p:inputText>
            <p:message for="number" />
            <h:outputText value="" />

            <h:outputLabel for="dd" value="Double:" style="font-weight:bold"/>					
            <p:inputText id="dd" value="" converterMessage="Cannot convert to double.">
                <f:validateDoubleRange minimum="5.5" maximum="8.5" />
            </p:inputText>
            <p:message for="dd" />
            <h:outputText value="" />

            <h:outputLabel for="money" value="Currency ($):" style="font-weight:bold"/>					
            <p:inputText id="money" value="" label="Currency">
                <f:convertNumber type="currency" currencySymbol="$"/>
            </p:inputText>
            <p:message for="money" />
            <h:outputText value="">
                <f:convertNumber  type="currency" currencySymbol="$" />
            </h:outputText>

            <h:outputLabel for="regex" value="Regex (^[a-zA-Z]+$):" style="font-weight:bold"/>					
            <p:inputText id="regex" value="" validatorMessage="Value does not match pattern.">
                <f:validateRegex pattern="^[a-zA-Z]+$" />
            </p:inputText>
            <p:message for="regex" />
            <h:outputText value="" />

            <h:outputLabel for="date" value="Date" style="font-weight:bold"/>					
            <p:inputText id="date" value="" label="Date">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </p:inputText>
            <p:message for="date" />
            <h:outputText value="">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="desc" value="Description" style="font-weight:bold"/>
            <p:inputTextarea id="desc" value="" required="true" label="Description">
                <f:validateLength minimum="3" maximum="10" /> 
            </p:inputTextarea>
            <p:message for="desc" />
            <h:outputText value="" />
        </h:panelGrid>

        <p:commandButton value="Non-Ajax" ajax="false" icon="ui-icon-check" validateClient="true" style="margin-right:10px"/>
        <p:commandButton value="Ajax" update="grid" icon="ui-icon-check" validateClient="true" style="margin-right:10px"/>
        <p:commandButton value="Partial" update="grid" process="name number" icon="ui-icon-check" validateClient="true" style="margin-right:10px"/>
        <p:commandButton value="Disabled" ajax="false" icon="ui-icon-check" />
    </p:panel>
</h:form>