Sometimes, users don't want to fill all form elements and hit p:commandButton
or p:commandLink
to get feedback about valid values. They would like to get feedback immediately, for example, during typing or while leaving a field. CSV allows us to validate input values instantly on the client side by means of p:clientValidator
.
In this recipe, we will meet p:clientValidator
and develop an example with instant validation on the change
, keyup
, and blur
events.
First, we have to create a bean with three properties, as shown here:
@Named @ViewScoped public class InstantCsvBean implements Serializable { private String value1; private Integer value2; private Date value3; // getters / setters }
In Facelets, the properties are bound to the values of p:inputText
. Every p:inputText
tag will obtain an attached p:clientValidator
tag with a specified event. A missing event means the change
event, which is set as default in this case. This is shown in the following code:
<h:panelGrid columns="3" cellpadding="3"> <p:outputLabel for="text" value="Validation on change"/> <p:inputText id="text" value="#{instantCsvBean.value1}"> <f:validateLength minimum="2" maximum="4"/> <p:clientValidator/> </p:inputText> <p:message for="text"/> <p:outputLabel for="int" value="Validation on keyup"/> <p:inputText id="int" value="#{instantCsvBean.value2}"> <p:clientValidator event="keyup"/> </p:inputText> <p:message for="int"/> <p:outputLabel for="date" value="Validation on blur"/> <p:inputText id="date" value="#{instantCsvBean.value3}"> <f:convertDateTime pattern="dd.MM.yyyy"/> <p:clientValidator event="blur"/> </p:inputText> <p:message for="date"/> </h:panelGrid>
The first attached p:clientValidator
tag validates the String
value if it has a length between two and four characters. Validation occurs at the time when the input value has been changed and the focus has left the field (onchange
event). The second p:clientValidator
tag validates the Integer
value when the user is typing into the input field (onkeyup
event). The third p:clientValidator
tag validates the Date
value when the input field loses the focus (onblur
event). The onblur
event is most often used with form validation. Connected p:message
components are updated automatically on the mentioned events. They display validation errors as usual in these cases.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter10/instantCsv.jsf
.