On Java Development

All things related to Java development, from the perspective of a caveman.

JSF Validation and Error Messages

without comments

Introduction

This post illustrates the use of a JSF Validator class that validates data supplied to a dialog’s input text field. Error messages are then placed into the Faces Context for display.

Shown below is a very simple dialog that asks for the name of a project. As indicated, it is a mandatory field. The challenge is to determine if the value entered – or not – is valid. If it is not a valid entry, the dialog must remain displayed so that the error messages can be seen and the problem can be fixed.
ProjectNameDialog01

With the dialog displayed as shown above, if the user decides to leave the text field blank and then selects the “OK” button, the dialog should not close and show all error messages as shown below.
ProjectNameDialog03

Then if the entry is supplied but too short, only the message that relates to the relevant error should be shown.
ProjectNameDialog02

 
The Validator Class

Shown below is the validator class used to determine the error conditions and to establish the error messages to be presented on the dialog. Line 18 establishes the class as a validator and its name is assigned. The next lines shows the required method, validate(FacesContext arg0, UIComponent component, Object value) that is implemented so that it will be automatically called when the “OK” button is pressed.

The work to be performed is contained within the 2 if-groups shown. The first tests for a blank value and proper length while the second checks only for valid length. Both are using the helper-class, Assert which keeps the test from looking too ugly and difficult to maintain.

The basic idea is pretty straight forward; construct the error message, set the severity and stuff each message into the Faces Context. Finally, the validation flag is set so that when the process returns to the web-page, it can be used to tell JSF to display the error messages. The JSF/RichFaces code that displays the error messages for the input text field is shown below. Note the use of the f:validator and the rich:messages tags.

This sets up the data validation processing. Next, the “OK” button needs to send it and pay attention to the outcome so that it remains displayed if required.

 
The “OK” Button

This segment of the dialog shows the code for the “OK” button. When the dialog is submitted the validation processing presented before is evoked. On the return, the JavaScript logic supplied on the oncomplete tag tests the faces context for errors. The boolean being checked here was set by each of the if-groups of the validator class (context.validationFailed()). The if-group checks the boolean to determine of the dialog should be closed or remain open, resetting the dialog’s disabled flag so that the “OK” button can again be pressed.

 
For clarity, this is the XHTML code for the dialog.

 
Summary
This post showed how to use a validator class and the Faces Context to show error messages on a dialog while keeping it displayed. The first benefit to this approach is that the web-page code is easier to read. The second benefit is that with the validation code contained within a class file, there is a greater chance for reuse across multiple projects.

Written by admin

February 26th, 2014 at 5:59 am

Leave a Reply

You must be logged in to post a comment.