Custom Validator

After googling I have decided to do by own an Custom Validator which will shows error tip if validation fails.

By default flex validator shows error tip on mouse over.

It shows only red border when validation fails without error tip , but i dont think that will be understandable to user.

So I have developed custom validator , here is code for that..
package
{
import flash.events.MouseEvent;
import flash.geom.Point;

import mx.controls.TextInput;
import mx.controls.ToolTip;
import mx.events.ValidationResultEvent;
import mx.managers.ToolTipManager;
import mx.validators.Validator;

public class CustomValidator extends Validator
{
public function CustomValidator()
{
super();
addEventListener(ValidationResultEvent.INVALID,handleInvalid);
addEventListener(ValidationResultEvent.VALID,handleValid);
}
override public function set source(value:Object):void{
super.source = value;
if(source){
source.addEventListener(MouseEvent.ROLL_OVER,handleMouseOver);
source.addEventListener(MouseEvent.ROLL_OUT,handleMouseOver);
source.addEventListener(MouseEvent.MOUSE_OVER,handleMouseOver);
source.addEventListener(MouseEvent.MOUSE_OUT,handleMouseOver);
source.addEventListener(MouseEvent.MOUSE_MOVE,handleMouseOver);
}
}
private var errorTip:ToolTip ;
private function handleInvalid(event:ValidationResultEvent):void{
if(!errorTip){
var pt:Point = new Point(source.x,source.y);
// convert local points to global co-ordiante systems point
pt = (source as TextInput).localToGlobal(pt);
var startX:Number = pt.x + source.width + 5;
var startY:Number = pt.y;
errorTip = ToolTipManager.createToolTip(requiredFieldError, startX, startY) as ToolTip;
errorTip.x = startX;
errorTip.setStyle("styleName", "errorTip");
errorTip.visible = true;
}else{
if(!errorTip.visible)
errorTip.visible = true;
}
}
private function handleValid(event:ValidationResultEvent):void{
//once the valid event fires destroy the tooltip so that it will be garbage collected
if(errorTip && errorTip.visible){
ToolTipManager.destroyToolTip(errorTip);
errorTip = null;
}
}
private function handleMouseOver(event:MouseEvent):void{
//here for time being I have done a workaround for stopping the display default error tip
//may be this can be handled in better way.
event.stopImmediatePropagation();
}
}
}

You can try this code and please revert back for any queries.

Advertisements
Explore posts in the same categories: Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s