Client Side Validation - Basic

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.

basic.xhtml
ValidationView.java

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

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

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

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

            <h:outputLabel for="money" value="Currency ($):" style="font-weight:bold"/>
            <p:inputText id="money" value="#{validationView.money}" label="Currency">
                <f:convertNumber type="currency" currencySymbol="$"/>
            </p:inputText>
            <p:message for="money" />
            <h:outputText value="#{validationView.money}">
                <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="#{validationView.regexText}" validatorMessage="Value does not match pattern.">
                <f:validateRegex pattern="^[a-zA-Z]+$" />
            </p:inputText>
            <p:message for="regex" />
            <h:outputText value="#{validationView.regexText}" />

            <h:outputLabel for="date" value="Date (java.util.Date)" style="font-weight:bold"/>
            <p:inputText id="date" value="#{validationView.date}" label="Date (java.util.Date)">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </p:inputText>
            <p:message for="date" />
            <h:outputText value="#{validationView.date}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="date2" value="Date (java.util.Date; PF Calendar)" style="font-weight:bold"/>
            <p:calendar id="date2" value="#{validationView.date2}" pattern="MM/dd/yyyy" label="Date (java.util.Date; PF Calendar)">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </p:calendar>
            <p:message for="date2" />
            <h:outputText value="#{validationView.date2}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="date3" value="Date (java.util.Date; PF DatePicker)" style="font-weight:bold"/>
            <p:datePicker id="date3" value="#{validationView.date3}" pattern="MM/dd/yyyy" label="Date (java.util.Date; PF DatePicker)">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </p:datePicker>
            <p:message for="date3" />
            <h:outputText value="#{validationView.date3}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="localDate" value="LocalDate (Java8)" style="font-weight:bold"/>
            <p:inputText id="localDate" value="#{validationView.localDate}" label="LocalDate (Java8)">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </p:inputText>
            <p:message for="localDate" />
            <h:outputText value="#{validationView.localDate}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputLabel for="localDate2" value="LocalDate (Java8; PF Calendar)" style="font-weight:bold"/>
            <p:calendar id="localDate2" value="#{validationView.localDate2}" pattern="MM/dd/yyyy" label="LocalDate (Java8; PF Calendar)">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" />
            </p:calendar>
            <p:message for="localDate2" />
            <h:outputText value="#{validationView.localDate2}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" />
            </h:outputText>

            <h:outputLabel for="localDate3" value="LocalDate (Java8; PF DatePicker)" style="font-weight:bold"/>
            <p:datePicker id="localDate3" value="#{validationView.localDate3}" pattern="MM/dd/yyyy" label="LocalDate (Java8; PF DatePicker)">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" />
            </p:datePicker>
            <p:message for="localDate3" />
            <h:outputText value="#{validationView.localDate3}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" />
            </h:outputText>

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

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

@Named
@RequestScoped
public class ValidationView {
    
    private String text;
    private String description;
    private Integer integer;
    private Double doubleNumber;
    private Double money;
    private String regexText;
    private Date date;
    private Date date2;
    private Date date3;
    private LocalDate localDate;
    private LocalDate localDate2;
    private LocalDate localDate3;

    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }

    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getInteger() {
        return integer;
    }
    public void setInteger(Integer integer) {
        this.integer = integer;
    }

    public Double getDoubleNumber() {
        return doubleNumber;
    }
    public void setDoubleNumber(Double doubleNumber) {
        this.doubleNumber = doubleNumber;
    }

    public Double getMoney() {
        return money;
    }
    public void setMoney(Double money) {
        this.money = money;
    }

    public String getRegexText() {
        return regexText;
    }
    public void setRegexText(String regexText) {
        this.regexText = regexText;
    }

    public Date getDate() {
        return date;
    }
    public void setDate(Date date) {
        this.date = date;
    }

    public Date getDate2() {
        return date2;
    }
    public void setDate2(Date date) {
        this.date2 = date;
    }

    public Date getDate3() {
        return date3;
    }
    public void setDate3(Date date) {
        this.date3 = date;
    }

    public LocalDate getLocalDate() {
        return localDate;
    }
    public void setLocalDate(LocalDate localDate) {
        this.localDate = localDate;
    }

    public LocalDate getLocalDate2() {
        return localDate2;
    }
    public void setLocalDate2(LocalDate localDate) {
        this.localDate2 = localDate;
    }

    public LocalDate getLocalDate3() {
        return localDate3;
    }
    public void setLocalDate3(LocalDate localDate) {
        this.localDate3 = localDate;
    }
}

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

Name:
Number:
Double:
Currency ($):
Regex (^[a-zA-Z]+$):
Date (java.util.Date)
Date (java.util.Date; PF Calendar)
Date (java.util.Date; PF DatePicker)
LocalDate (Java8)
LocalDate (Java8; PF Calendar)
LocalDate (Java8; PF DatePicker)
Description