Tuesday, February 2, 2010

Flex CompareValidator custom Validator

I have been using Matt Holden's Password Strength Indicator component with great success, but I was asked to make the input errors more obvious. The Flex Validators are a nice start, but their red-outline + tooltip approach is not the most intuitive. So, in conjunction with my improved Flex validation, I created a custom Validator for the password component to do the confirmation password comparison. The CompareValidator is generic enough that it can be reused for other components like account numbers or email addresses.

package core.util
{
import mx.validators.ValidationResult;
import mx.validators.Validator;


public class CompareValidator extends Validator
{
public var valueToCompare:Object;
public var errorMessage:String = "Value does not match.";

public function CompareValidator()
{
super();
}

override protected function doValidation(value:Object):Array {
var results:Array = [];
var srcVal:Object = this.getValueFromSource();

if (srcVal != valueToCompare) {
results.push(new ValidationResult(true, null, "Match",errorMessage));
}
return results;

}
}
}


The MXML looks like this:


<coreutil:CompareValidator
id="comparePasswords"
source="{password2}"
property="text"
valueToCompare="{password.text}"
errorMessage="Passwords do not match."
/>

1 comment:

Anonymous said...

very simple and good example.

Thanks,
Talib Aziz