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.