JSF Client Validators

Introduction

JSF Client Validators component library provides a rich set of implementation independent custom components aiming to bring client side validation features to the JSF Framework. Validators has several customization attributes like display mode, highlighting, error messages and etc.

Dependencies

The only dependency at runtime is a JSF implementation. Although myFaces is the suggested implementation, the library is also tested with the RI.

JSF Implementation: MyFaces 1.1.X

Installation

classpath

Put the clientvalidators-0.9.0.jar to the WEB-INF/lib of your JSF application.

taglib

Define the taglib at the top of your jsf page.

<%@ taglib uri="http://sourceforge.net/projects/jsf-comp/clientvalidators" prefix="cv"%>

return validate();

Define the javascript caller for the component causing the submit. Examples should be a form's onSubmit, a button's onClick and etc.

Form onSubmit
Button onClick

Prefix Mapping

Resources are loaded from the distribution jar using the default /faces/* prefix, make sure this mapping is defined in web.xml.

	Faces Servlet

	/faces/*

Validators in Detail

Required Field Validator

Validates whether the input is empty or not.

componentToValidate: Server id of the component to be validated.
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

Range Validator

Validates whether the input satisfying the range requirements or not. Either minValue or maxValue must be supplied.

componentToValidate: Server id of the component to be validated.
minValue: Value the input must be greater or equal.
maxValue: Value the input must be less or equal.
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

Compare Validator

Validates whether the input of these components equal or not.

componentToValidate: Server id of the component to be compared.
componentToCompare: Server id of the component whose value to be compared with.
operator: Comparing is done according to this attribute. Possible values are "eq" and "not".
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

Regular Expression Validator

Validates whether the input satisfies the pattern of a regular expression.

componentToValidate: Server id of the component to be validated.
pattern: A mandatory attribute specifying the regular expression pattern the input must satisfy.
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

Length Validator Validator

Validates whether the length of the input satisfies the length requirements.

componentToValidate: Server id of the component to be validated.
exactly: The length of the input must be equal to the value supplid with this attribute.
min: The length of the input must be (ge) greater than or equal to the value supplid with this attribute.
max: The length of the input must be (le) less or equal to the value supplid with this attribute.
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

Integer Only Validator

This validator is not implemented as a component instead comes as a javascript function. It disables the keypressing of letters and allow only integers. Function call onkeypress must be "keyPressNumber(false);"

Example:

Custom Validator

Enables application developers to integrate their own validators to the client validation framework.

componentToValidate: Server id of the component to be validated.
function: Name of the javascript function that will be called during validation.
params: String representing the parameters of the specified function.
errorMessage: Message to be displayed in case the input is empty.
highlight: A boolean value, if indicated as true the component with the invalid input is highlighted with color. Default value is false.
display: Optional attribute indicating the display mode of the validation error. Possible values are "static", "dynamic" (default), "none". More info at display mode section.
style: Optional attribute specifying the style class of the validation message.

Example:

function customFunctionName(param1) {

var value = document.all[param1].value;

if(value == 'someValueToBeTested')

	return true;

else

	return false;

}

Validation Summary

If supplied in the page, the validation summary displays all the validation errors in the page.

style: Optional attribute specifying the style class of the validation message.

Example:

Script Generator

Main component responsible for encoding the validator function calls.

form: Server id of the form to be validated.
popup: Optional attribute, if flagged as true then the validation summary is displayed in a popup. Default is false.

Example:

Internalization and Error Messages

Client validators follow a chain when getting the error message for the validation.

1) errorMessage attribute: At first message supplied with this attribute is used. It can also take a valuebinding expression as well as a static text.
2) Resource Bundle: If errorMessage attribute is not supplied then messages in the application's message bundle is checked with the specifed keys. These built-in keys are shown at f.a.q. section.
3) Built-in constant messages.: In the end, if there is no message with the specified key then message is retrieved hardcoded.

F.A.Q. and MORE INFO

1) What is display attribute for?

Display mode is customized using the "display" attribute. Here are the possible values and their effects.

					dynamic

Default display mode, the space for the validation message is not reserved and created when the validation error occurs.

static

Space for the validation message is allocated.

none

Validation error is not displayed where the validator component is put instead displayed at validation summary.

2) How can I turn on popup validation?

By default popup is turned off. Validation messages are displayed where the validator tags are placed. If the popup is

turned on via the script generator component, the validation summary is displayed in a popup window.

3) I have my own validation functions, how can I plug them?

Custom validator is an extension point for this job, it takes a function name and parameters as a comma seperated string.

4) Can I use resource bundles and what are the default keys that can be used in a message bundle?

Yes, you can via the f:loadBundle tag. Also here are the built-in keys

				

CV_REQUIRED_FIELD_VALIDATOR_ERROR = Some Text

CV_COMPARE_VALIDATOR_ERROR = Some Text

CV_RANGE_VALIDATOR_ERROR = Some Text

CV_REGULAR_EXPRESSION_VALIDATOR_ERROR = Some Text

CV_LENGTH_VALIDATOR_ERROR = Some Text

5) Is there a sample web application?

Yes, at jsf-comp downloads section.

6) Is it possible to change the look of the validation messages?

Yes, this is what style attribute for, you can supply your own style class.

7) What is author doing now?

The author is currently working on client side validation features for extended validators in myfaces. These validators will

have enableClientScript attribute that will enable them to do validation at client site.

8) What is your favorite team?

F.C. Barcelona