Client Side Validation Framework

Client Side Validation, CSV in short has a history for us years before PrimeFaces. If you are interested in a little bit of history, see the Diaries of a JSF Client Side Validation Lunatic entry from 2006. (This is way before Optimus Prime era).

CSV support for JSF is not an easy task, it is not simple as integrating a 3rd party javascript plugin as JSF has its own lifecycle, concepts like conversion and then validation, partial processing, facesmessages and many more.  Real CSV for JSF should be compatible with server side implementation, should do what JSF does, so that users do not experience difference behaviors on client side and server side. In 2006, the technology was just not good enough to provide a first class CSV framework for JSF but as of 2013, we have the necessary tools like jQuery and HTML5.

PrimeFaces CSV Framework is the most complete and advanced CSV solution for JavaServer Faces and Java EE.

Server Side Compatible

JSF lifecycle phases that are related to validation (process validations, render response) are implemented with javascript. Even configuration settings like validate_empty_fields are supported.

Metadata Driven

Validation metadata is stored using HTML5 data attributes so that page is not bloated with script tags, page size is kept small and lightweight.

Partial Processing with Ajax

JSF Ajax API has the concept of partial processing to execute certain components in lifecycle within an ajax request. CSV supports this as well by only validating components that would be processed with ajax on server side.

Localization

PrimeFaces Locales API has been enhanced to include translations for messages. JSF features like message formatting, labels, requiredMessage, validatorMessage, converterMessage are all supported when displaying messages

Client Side Renderers

Message components as well as input components have client side renderers so that they reflect the changes of validations results purely on client side.

Custom Converters and Validators

All of the built-in JSF converters and validators are available at client side, however if you have a custom converter-validator it is easy to port them to client using CSV APIs like ClientValidator-ClientConverter interfaces.

Custom Events

By default, CSV is triggered when a form is submitted with a button-link click, however it is also possible to validate an input instantly using p:clientValidator behavior providing support for customizable dom events like blur, change, keyup and more.

Configuration 

CSV is disabled by default and a context param setting is required to switch it on. Trigger components like buttons-links are also equipped with necessary attributes for component based control.

Bean Validation

JSF already provides integration with Bean Validation on server side and PrimeFaces takes it to the next level with CSV integration. You just need to annotate your model with  bean validation constraints and PrimeFaces validates them on client side. If you have a custom constraint like @MyConstraint, CSV also provides an API to port them to client side so that your custom annotations can validate at client side as well.

Demos

It is suggested to try showcase demos with a clean browser cache.

Roadmap

CSV is targeted for upcoming PrimeFaces 4.0 aka Sentinel.

This entry was posted in Uncategorized. Bookmark the permalink.

6 thoughts on “Client Side Validation Framework

  1. Is this framework integrated with JSF (already similar implementation is available with Richfaces) or can be used as a standalone product?

    • PrimeFaces CSV is tightly integrated with PrimeFaces internals so can’t be used as a standalone project. ü

      Regarding RichFaces CSV, please don’t get me wrong I don’t want to disrespect other peoples work but at its current state, it offers only very little (around 20%) of what PF CSV offers.

  2. Catagay !

    I’m with the Primefaces 4 Snapshot and would like to know what configuration is required to be made ​​in context so I can test it?

    Thanks !!

    • Set primefaces.CLIENT_SIDE_VALIDATION context parameter to true and use validateClient=”true” on commandButton/commandLink. For custom events, use p:clientValidator.