24 September 2008

Flex Validator Error Message Issue - Found Solution

Flex's validators are great but they're a little too subtle in notifying the user of errors: They mark the error field on the form with a red border. If you roll over the field, you'll see the error in a red tooltip. Why not have an option to display the validation error when it occurs, instead of having to mouse over to see it?

Well, here's a solution by Steven Gemmen. When you detect the error, dispatch an event to fool the field into thinking there's been a mouseover. Of all the solutions I've seen, this is the best/easiest.

The only problem I've run into is that the ValidationResultEvent's field property is null, even though the field has thrown the error. So I'm storing the source property in the subfield, generated from a custom validator,

  _results.push(new ValidationResult(true, super.source.toString().substring(super.source.toString().lastIndexOf(".")+1), "BadFileName", _errorMessage));  
return _results;

Not elegant, but it fixes the issue. Back on the page, I call the custom validator's Validate() method manually and receive the ValidateResultEvent.

  if (results.type == ValidationResultEvent.INVALID){
var val:ValidationResult = results.results;

This calls the function to activate the error tooltip,

  private function setValidationFocus(objName:String):void{
var frmObj:TextInput = this[objName];

frmObj.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));

Now to figure out why I'm not able to get the field property. Also, how do you remove the tooltip when the user clicks into the field?


Mike H said...

Hi Alex,
Any chance you can post some code of a working app for this. I guess I am missing something.

Alex C said...

I'm out of the country right now but will do so in January. Where did you get stuck? Any errors?

Anonymous said...

This works, but how do you go about showing the tooltip on multiple fields? In otherwords, if I have 5 required fields on a form and I hit submit, using this mouseover technique works, but it only focuses on one field at a time. I would like to show the tooltip on all fields. Any idea how to do this?


Alex C said...

Check out this article for a solution to this: http://aralbalkan.com/1125

In addition, vote on the feature request from Adobe: https://bugs.adobe.com/jira/browse/FLEXDMV-2002

The more votes it gets, the more likely they'd add it as a feature. Thanks.

sansegot said...

One even simpler solution would be to access the listener object through the UIComponent and invoke setFocus and dispatchEvent right there in the doValidation function.

For example:

var theComponent:UIComponent = super.listener as UIComponent;
theComponent.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));

David A. Bethune said...

You can also use the currentTarget.source property of the ValidationResultEvent. currentTarget returns the Validator and source gives it's TextBox, which you can setFocus() on.

Alex C said...

Thanks, David. Great approach.