Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

Show Error on Form Field / Text Input or Show Me Where It Hurts

I have extended a flexlib component to immediately display an error message next to a TextInput. With this component the user is no longer required to mouse over the text field or TextInput in order to see an error message. Seriously, how annoying was that…

Image Of Sample App

This component is based on a popular request from clients (“Please show the user wtf is going on”) and some code from an Aral Balkin post.
My component includes an adjustErrorXPosition and adjustErrorYPosition to allow the developer to adjust the location of the error display since nesting this component can effect the x and y. If your textInput is the child of a draggable element then use repositionError(event:*) to reposition the error when the parent is dragged.
Also, there is an eventListener in the constructor which calls hideError() that hides the error when the TextInput component receives focus.

Check out the sample app and right click on it to view all the sourcey goodness (and grab the code for the component).
You can read the code comments for a better understanding of how to use the component but the important bit is – set errorText = “error message to display” when you want to display an error and errorText = ” ” when you want the error to disappear.

* note: during testing i noticed that loading the TextInput outside a container (ie. as a direct child of Application) resulted in a 500px difference between the x position of the error in FireFox and the x position in Safari.

more posts at


No Responses to “Show Error on Form Field / Text Input or Show Me Where It Hurts” (post new)


Leave a Reply

You must be logged in to post a comment.