It is not what you are thinking."the error "the input contains invalid characters" is not displaying any more when user enter the invalid character again"
It will display only thing is either you have to use tab button from that textinput control to see the error message. So ultimately is the trick is in triggerevents. It depends on which event you are using.
Other option is use eventhandler where you can call validator.validateall() method so all validators will show error at a sametime....
I agree with VRPDeveloper's comments.
There are a couple of things you can do to get rid of the error border.
Add this to your NumberValidator:
That will remove the red border when you type a number back in.
You can also set the restrict property of the TextInput so the user can never type in anything but a number:
Then you won't have any error border at all. Unless you add required="true" to the validator, enter the field, then exit the field. An error border will then appear.
For my case, I want to validate the input as the user entered every single character. Hence the NumberValidator is listening to the change event of the TextInput control (real-time validation).
In my previous example, the validator is displaying an error when the user typed a character "a" without pressing any tab or enter key. But not anymore when the user typed "1a" ...