Proper Form Validation in flex

Validators in flex have always been a mystery and I happened to encounter one of those really upsetting quirks in one of my projects.What I am talking about is the un invited red borders that get visible when you tab out of fields which have validators assigned.One would expect that the error tooltip would also appear when the red borders come.But you know, flex throws some unpleasant surprises at you at times and this is one such thing.Don't contemplate harrikiri yet :-). Every problem has a solution hidden inside it.

 

This is how it looks

 

 

 

            Turns out that the ToolTipManager can help one hiding and showing tooltips as and when requried.

           

            Here is some sample code.

 

            <mx:FormItem label="Your name">

                <mx:HBox>

                    <mx:TextInput id="yourName" change="onChangeText(event);" focusOut="onChangeText(event);"/>                

                </mx:HBox>

            </mx:FormItem>

 

            private function onChangeText(eve:Event):void {

                       

          var target:TextInput = eve.currentTarget as TextInput;

if (target.text == "")

                        {

            // Has the error message ToolTip already been created?

            // (A reference to created ToolTip instances is saved in a hash called errorMessageToolTips.)

                   // Create the ToolTip instance.

        var pt:Point = new Point(target.x, target.y);

        pt = target.contentToGlobal(pt);

        var errorTip:ToolTip = ToolTipManager.createToolTip(errorMessages[target.name] + " cannot be empty", pt.x + target.width + 5, pt.y) as ToolTip;

        errorTip.setStyle("styleName", "errorTip");

        errorTip.visible=true;      

                        }

            }

 

           

 

            Comments Welcome .. As always.