I suggest you have a closer look at the FLEX samples in Adobe docs.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f52.html
I think what you need is similar with the "Clearing a validation error" sample, you just need to trigger the validation automatically.
UPDATE - HERE A SAMPLE CODE THAT WORKS FOR ME
Youn need to call the method on the rollOver event on the textInput...
<?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" minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<mx:StringValidator
id="userNameValidator"
source="{employeeName}"
property="text"
minLength="4" maxLength="20"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
private var vResult:ValidationResultEvent;
// Function to validate data and submit it to the server.
private function validateAndSubmit():void {
// Validate the required fields.
vResult = userNameValidator.validate();
if (vResult.type==ValidationResultEvent.INVALID)
return;
}
// Clear the input controls and the errorString property
// when resetting the form.
private function resetForm():void {
employeeName.text = '';
employeeName.errorString = '';
}
]]>
</fx:Script>
<mx:HDividedBox>
<s:Panel>
<s:Form>
<s:FormItem>
<s:TextInput
id = "employeeName"
rollOver = "validateAndSubmit()"/>
</s:FormItem>
<s:FormItem>
<s:TextInput
id = "employeeID"/>
</s:FormItem>
<s:FormItem>
<s:Button
label = "Clear"
click = "resetForm()"/>
</s:FormItem>
</s:Form>
</s:Panel>
</mx:HDividedBox>
</s:Application>