ADF Client Side Validation with JavaScript

In my previous post I explained how to use JS client side formatter for ADF Faces input components - ADF Goes Client Side - UI Performance Boost with JavaScript. The same principle can be applied for client side validation. Most likely you are not going to implement complex validation rules on the client side, but for simple checks - it will be perfect. There will be no roundtrip to the server and this will allow to improve user experience.

Client side validation check runs instantly when value is changed and there is no need to set Auto Submit = true to send value to the server. This rule checks value to be in certain range, similar simple checks can be implemented on client side (I'm sure you will find similar rules in your project):

If value is in range, client side formatter is applied as expected:

Custom JSF converter is registered in faces-config.xml and can be added to the input field either manually or dropped through the wizard:

Converter is based on ID, which is defined in faces-config.xml:

Definition in faces-config.xml:

Customer converter class defines range values, these properties will be consumed in JS logic:

Range check is done in JS. If validation fails, we display JSF error message. All happens on client side, without request to the server:

Download sample application with client side validation logic - ADFFormattingApp_v2.zip.