Client Side Validation Framework implements JSF validation API within the browser.
<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; } }