Issue with both red and blue colors with validator and errorString of textinput

I'm facing a strange issue with flex and validator.

Here is the code:

TestMain.xml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.validators.StringValidator;

        import utils.ValidableProperty;

        [Bindable] public var nameID:ValidableProperty;

        public function start():void {
            var nameIDValidator:StringValidator = new StringValidator();
            nameIDValidator.required = true;
            nameIDValidator.maxLength = 35;
            nameID = new ValidableProperty(nameIDValidator);
            nameID.validate();
        }
    ]]>
</fx:Script>

<s:applicationComplete>
    start();
</s:applicationComplete>

<s:minHeight>600</s:minHeight>
<s:minWidth>955</s:minWidth>

<mx:Form color="0x323232" paddingTop="0">
    <s:Label text="See strange behavior of errorString during validator operation with validate."/>
    <mx:FormItem label="Name">
        <mx:TextInput id="nameInput" width="300" errorString="@{nameID.errorMessage}" text="@{nameID.value}"/>
    </mx:FormItem>
</mx:Form>

ValidableProperty.as

package utils
{
    import flash.events.EventDispatcher;
    import mx.events.PropertyChangeEvent;
    import mx.events.ValidationResultEvent;
    import mx.validators.Validator;

    public class ValidableProperty extends EventDispatcher
    {
        [Bindable]
        public var value:Object;

        private var validator:Validator;

        [Bindable]
        public var isValid:Boolean;

        [Bindable]
        public var errorMessage:String;

        private var statusChangeHandler:Function;

        public function ValidableProperty(validator:Validator, statusChangeHandler:Function=null,
                                          target:IEventDispatcher=开发者_运维百科null) {
            super(target);

            this.validator = validator;
            this.statusChangeHandler = statusChangeHandler;

            this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, propertyChangeHandler);
        }

        private function propertyChangeHandler(evt:PropertyChangeEvent):void {
            if (evt.property == "value") {
                this.validate();
            }
        }

        public function validate():void {
            var result:ValidationResultEvent = this.validator.validate(this.value);
            this.isValid = (result.type == ValidationResultEvent.VALID);
            if (isValid) {
                this.errorMessage = null; 
            }
            else {
                this.errorMessage = result.message;
            }
            if (statusChangeHandler != null)
                statusChangeHandler();
        }

        public function set required(required:Boolean):void {
            if (validator == null)
                return;
            validator.required = required;
        }
    }
}

When you execute this simple code, when writing a value, for example "A", the errorMessage value "this field is required" will disappear but the red color on the inputtext border will still be there with the blue color.

When deleting the A value, this time the blue color will be there with the red one (cannot reproduce all the time) and the error message "this field is required".

What am I missing here? Is it a bug in flex? We cannot have both of red and blue colors on the textinput border.

I am using Eclipse with Flex SDK 4.5.0 (build 20967)

This is not a bug in Flex. This is a bug with how you're coding it all. If you were to follow the example in the documentation, it would work.

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate StringValidator. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <mx:StringValidator source="{nameInput}" property="text" 
                tooShortError="This string is shorter than the minimum length of 4. " 
                tooLongError="This string is longer than the maximum allowed length of 35." 
                minLength="4" maxLength="35"/>
    </fx:Declarations>

<s:Form>
    <s:FormItem label="Name">
        <s:TextInput id="nameInput" width="300" text="{nameID.value}"/>
    </s:FormItem>
</s:Form>

</s:Application>

I finally resolve this. I was using mx:TextInput instead of s:TextInput. Thanks J_A_X for your suggestion !