Monday, October 28, 2013

Client Side Validation in ADF Faces

I will be going through a simple use case in this post to implement Client Side validation in ADF Faces components. By default ADF Framework provides quite a few validators which can be used while implementing use cases. Sometimes there is a need to create your own custom validators. This post explains, how to create a custom client side validator.
Validation can be of two types. Client Side validation and Server Side validation. Ideally there should be a check (validation) on both sever side and client side code.

I will be using JavaScript to code the logic of validator and will invoke this through ADF Framework class.



I will be implementing a simple CustomLessThanValidator which allows a input text to have values less than 100. If user enters value above 100, it throws an error and validation is failed.

Lets get started .

I created a simple ADF Web Project in jdev and created a folder for js inside resource. Created a java script file validator.js as below.




Now add a new custom validator code in the validator.js as below.


Now create a java class named CustomLessThanValidator in side package. This class should implement two interfaces. These are 
  • org.apache.myfaces.trinidad.validator.ClientValidator
  • javax.faces.validator.Validator
The client side validation api is basically provided by ClientValidator interface. We need to implement Validator to make this class as JSF faces validator. If we will not implement Validator interface and use it, framework will give exception at runtime that it cannot cast the custom class into validator.

Also we need to over ride abstract methods provided by these two interfaces. We will be working / implementing on the methods provided by ClientValidator interface. Validator interface methods will be implemented just to avoid compile time error.

Below is the code for validator class.



getClientLibrarySource () method returns the reference of validator.js javascript file.

gettClientValidation method returns a new object of Custom Validator type in js.


We have created our custom validator , but we still havnt told the framework about our new validator. We need to register this validator in faces-config.xml. Open faces-config.xml and do an entry of this validator to register it as below.


So we are almost done. Just left is to create a page and test our custom validator. Create a new page and use a input text and add our custom validator to it. Remember that the id of the validator should be same as the one we used while registering the validator in faces-config.xml.


Now we are all set. Lets run this page and check out.


If we enter a value more than 100 and tab out, the error comes and this is done on client side using our custom java script validator code.


Happy Learning!!

3 comments: