gwt-vl - THE validation library for GWT

Client side validation

To get you up and running I will you show you a quick example how the client side of the validation functionality is build using the GWT Validation Library.

We will have a form with one TextBox widget which will be used for entering the year of birth. If the validation fails we want the TextBox to get a red border, additionally a label should be set to the corresponding error message, that tells the user what went wrong. Standard GWT stuff will be for some part ignored because the example should help you focus on the specifics of validation (Its assumed that you know standard GWT stuff).

So let's start:

We have a Dialog which we added the TextBox to. What we need additionally is a button that will trigger the validation and a Label that will present the validation error message, if there was one.
So we basically have something like this:

	TextBox birthYearTextBox = new TextBox();
	Label errorLabel = new Label("");
	Button validateButton = new Button("Validate!");

We would add these components to the dialog and then we would setup the validation constraints like this:

	ValidationProcessor validator = new DefaultValidationProcessor();
	
	validator.addValidators( "birthYear",
		new IntegerValidator(birthYearTextBox, 1890, 2009)
			.addActionForFailure(new StyleAction("validationFailedBorder"))
			.addActionForFailure(new LabelTextAction(errorLabel))
	);

We now have associated a validation constraint with a widget. We configured the IntegerValidator so that it will accept integer values in the range of [1890,2009]. We added two actions to the validator. The first action is the StyleAction which we configured to add the "validationFailedBorder" CSS-style (These styles must be defined by you in your projects CSS-file) to the validated widget (the TextBox), if it fails the validation. The second action that will be invoked if the validation fails is the LabelTextAction. It will set the text of the label to the error message that the IntegerValidator generates if its constraint is violated.

The only thing missing now, is the invocation of the validation process. Normally, before the data is send to the server we will perform client side validation and abort if it finds errors. To do this we configure the validate button to trigger validation:

	validateButton.addClickListener(new ClickListener() {
		public void onClick(Widget sender) {
			boolean success = validator.validate();
			if(success) {
				//No validation errors found. We can submit the data to the server!
			}else {
				//One (or more) validations failed. The actions will have been
				//already invoked by the validator.validate() call.
			}
		}
	});

That is essentially all you have to do to add rich client validations. You would do this with every data input widget that you want to validate. There is also the concept of GroupValidator's that are able to group certain validators and can then be used as a single validator. For example there exists a TrimmedStringLengthValidator. It consists of a TrimTransformator that will trim the input of a widget and a StringLengthValidator that will check if the trimmed input has a specific length.

As with validators, transformators and actions you can freely create your own group validators. This is part of the modular design of the GWT Validation Library that tries to help you to follow DRY (Don't repeat yourself) practices. So you would normally identify which kind of validations , transformators and actions you need and develop them once while using them throughout the application.

For more informations on these issues take a look into the resources section.

GWT-VL (Validation library and framework for GWT)

Client side validation