./Development

Flex 2 Validator “Error” Tooltip Gotcha

If you’ve used the Validation classes in Flex 2 you’ll know how useful they are as they take the headache out of having to create a load of code to manage and deal with checking the value in or of a designated field. The handy thing is that they link into the Tooltip manager classes too (albeit indirectly) so you can have a natty little error tooltip appear if the user should have entered a value but didn’t. Nice :D

However if you want to apply an additional layer of control over your input fields (and for the sake of clarity they need not be enclosed with any <mxForm/> or <mx:FormField/> tags), then you start to see a few weird things.

This one was a real hair puller when I first came across it and the solution isn’t too easy to track down due to the fact that the tooltips only exist if you interact with the item they are assigned to. So when you remove focus to check the debugger they are removed and are nigh on impossible to locate (unless you have created them yourself, but that kind of defeats the point really).

OK now I’ve lured you in what is this problem. Well If you have a field, and for this example I’ll be using a TextArea component, and it is enabled, then disabled via a external mechanism (in my case a CheckBox component) the validation that is applied to it does not turn off the Error Tooltip. In fact the validation classes don’t behave as you would expect at all.

The code below (take from the Adobe Flex documentation) illustrates how you would enable and disable a Validator on a field if you wished to alter its value (for example if you were to reset a form and clear all of the fields in it). Notice how we just disable the Validator reset the value of the field and re-enable the Validator. Works like a charm (or does it…).

[MXML]




[/MXML]

Actually it doesn’t strictly work as you would expect. If you disable / reset your input field while it is still showing an error indicator (usually a red keyline around the field in question) then you get a whole different set of problems.

In the example below if you follow the text you’ll see that once you roll back over the disabled TextArea it still “magically” shows the error tooltip. Now I would have expected the code above to be sufficient to do what I need it to do. However the issue isn’t strictly the Validators problem. You see it appears that the error tooltip doesn’t get removed when the field is disabled. As far as it is concerned the field is still invalid until the Validator tells it otherwise, and we know that’s not going to happen as we’ve disabled it…So the Validator keeps on validating and the Tooltip Manager keeps displaying the error tooltip and we are stuck in the middle as our validated field is now disabled :p

placeholder for flash movie

So how do we get around this “feature”. Well luckily for us we do have a solution inside the Validator class and it’s called
Validator.validate(value:Object=null, suppressEvents:Boolean=false). Once this has been applied then the Validator and the tooltip manager start to behave correctly. However this does somewhat fly in the face of what is detailed in the the Adobe documentation (granted it doesn’t take into consideration disabling the component being validated. The revised SWF below (right click for the source) has been updated and now behaves as it should.

placeholder for flash movie

However given the fact that their example (reproduced above) is provided to demonstrate how to disable a Validator from validating via code it seems a bit weak. Hopefully they will update their documentation to reflect this nuance in the Validators operation.

For those thinking it must be a bug, in all honesty I personally don’t think it is. I would say if anything it is a change request to have the Tooltip Manager class check if the component it is providing a tip for is flagged. This could be on whether it is enabled or not but realistically there are still times when you want to tooltip a disabled component… Regardless it would be good to get this one cleaned up as the current solution feel a bit “hacky” to me, and after spending ages trying to sort it out I can speak from a pretty confident corner :)

Discussion

8 comments for “Flex 2 Validator “Error” Tooltip Gotcha”

  1. nice work, mate but the source code link doesn’t seem to work.
    I’m redirected to this page “http://blog.flashgen.com/sourcecode/flexvalidatorbug/index.html” that generates a 404 error.

    Posted by Jean | August 24, 2007, 15:11
  2. Ooops my bad…Thanks Jean I’ll fix it now

    Posted by FlashGen | August 24, 2007, 15:27
  3. OK, source code link is now fixed :D

    Posted by FlashGen | August 24, 2007, 15:36
  4. All you have to do is set the components errorString to blank spaces
    (ex. textInputInstance.errorString = “”;)
    This will remove the errorToolTip and surrounding red border

    Posted by Flexpert | October 3, 2007, 06:26
  5. Nice, thanks Flexpert for that additional tip :D

    Posted by FlashGen | October 4, 2007, 17:06
  6. Great post! I like smaller error tool tips. I posted about it here:
    http://www.tonyamoyal.com/blog/?p=26

    Posted by Tony | May 6, 2009, 05:21
  7. Thanks Flexpert for your trick !!
    Was looking for it since some weeks !
    I couldn’t find how to remove the tooltip and the red border !

    ;)

    Posted by Julien B | January 11, 2010, 21:20
  8. I too have this problem , i want the tool tip to be removed once i disable the component. Which i can’t get done, Some one could help me here , if they no a clan way of doing it.. Thanks

    Posted by uday | September 26, 2010, 14:45

Post a comment