Article by Steven.
Published: April 17, 2009 at 15:58
Category: ActionScript 3, Flex

Creating your own Flex validator class

< back to overview

Every once in a while you come across a problem you can’t fix with the basic components provided by a certain kind of technology. OK, so I lied: Very often you come across a problem you can’t fix with the basic components! Flex is not different at all. It has some good basic validator classes, ranging from simple StringValidator to SocialSecurityValidator (which has no use at all except for the US) to even a RegExpValidator. This last one can help you validate almost anything, but you have to be proficient with regular expressions, which quite frankly not that many people are.

Since Flex uses Actionscript en since Actionscript is now a object oriented language, we can inherit from those basic validators and extend them to create our own. In this post I’ll try to explain how you do this by creating a TimeValidator as an example. What this validator should do, is take a string as input and validate it against a user defined format.

So the first thing we need to do is extend our custom class from a base class. Now, the question of course is which base class? Well, since we will be doing nothing to fancy, we can even start from the mother of all validator classes: Validator.

public class TimeValidator extends Validator {

I also mentioned that the validation should occur using a user defined format. To be able to do this, we need 2 things:

1) The definition of the format as a publicly available property of the class (e.g. ##:##:##)

2) The definition of the delimiter that is used in the format property and this also has to be accessible to the outside world

private var _inputFormat:String;

private var _formatChar:String;

public function set inputFormat(value:String):void {

_inputFormat = value;

}

public function get inputFormat():String {

return _inputFormat;

}

public function set formatChar(value:String):void {

_formatChar = value;

}

public function get formatChar():String {

return _formatChar;

}

Now that we have this part set up, the only thing that is left to do is the actual validation. Now, every validator has a doValidation method. And of course we can override this one to create our own validation. To override this method, simply define it as follows:

override protected function doValidation(value:Object):Array {

What this method should return is an array of errors of the type ValidationResult, so the application that uses this validator can check whether or not the validation has succeeded. Upon successful validation, the array will be empty. Otherwise, one or more errors will be placed in that array.

First of all we start by performing the validation defined by the super class and placing that result into the return array.

var errorArray:Array = super.doValidation(value);

Once this is done, we start our own validation. What I’ve done here, is created a very simple way of verifying the input value. I start of by cutting the value into pieces based on the format character that was defined earlier in the constructor or by the user when defining this validator. Then I see whether or not the chunks match the length of the defined format. The first chunk also shouldn’t be larger than 23, since it will represent the hour. And in the same way, the second and potentially third chunk cannot be more than 59, because they represent the minutes and seconds.

When one of the checks fails, a new ValidationResult instance is added to the result array with a custom message that can be displayed at runtime, depending on the implementation by the user. The code now looks something like this:

override protected function doValidation(value:Object):Array {

//validate super

var errorArray:Array = super.doValidation(value);

//return if there are already errors

if(errorArray.length > 0) {

return errorArray;

}

//no further validation if length == 0

if((value as String).length == 0) {

return new Array();

}

//check length

if((value as String).length > 0 &&

(value as String).length < _inputFormat.length) {

errorArray.push(new ValidationResult(true, null, “”, “Incorrect time fomat.”));

return errorArray;

}

//check # of delimiters

var format:Array = _inputFormat.split(_formatChar);

var split:Array = (value as String).split(_formatChar);

if(split.length != format.length) {

errorArray.push(new ValidationResult(true, null, “”, “Incorrect time format.”));

return errorArray;

}

if(split.length > 0) {

if(!(Number(split[0]) is Number)) {

errorArray.push(new ValidationResult(true, null, “”, “Incorrect time format.”));

return errorArray;

}

if(Number(split[0]) as Number > 23) {

errorArray.push(new ValidationResult(true, null, “”, “Hour cannot be more than 23.”));

return errorArray;

}

}

if(split.length > 1) {

if(!(Number(split[1]) is Number)) {

errorArray.push(new ValidationResult(true, null, “”, “Incorrect time format.”));

return errorArray;

}

if(Number(split[1]) as Number > 59) {

errorArray.push(new ValidationResult(true, null, “”, “Minutes cannot be more than 59.”));

return errorArray;

}

}

if(split.length > 2) {

if(!(Number(split[2]) is Number)) {

errorArray.push(new ValidationResult(true, null, “”, “Incorrect time format.”));

return errorArray;

}

if(Number(split[2]) as Number > 59) {

errorArray.push(new ValidationResult(true, null, “”, “Seconds cannot be more than 59.”));

return errorArray;

}

}

return errorArray;

}

As I mentioned before, this is a basic validator as an example of how to do it. In case of a real time validator, you should probably take into consideration that the first part is not always the hour. You can work with some basic masking again, creation a HH:MM:SS format that actually can work with e.g. MM:SS also. This would require some more checking in the doValidation method, but in essence, the way of doing it remains the same.

Steven

< back to overview

Name (required)

Mail (will not be published) (required)

Website