This content has been marked as final. Show 9 replies
When you want to remove the red box, set the errorString of the control to "".
John: Way cool! I needed this info, thanks!
Only issue I had was that it also prevents the tooltip from showing with the error message, but I use an Alert box to get that info to the user anyway.
While incorporating this new-found gem into an existing app, I went ahead and pulled out code to give you an example of how to run validators, set props, display helpful error messages, etc. Knowledge I could have used when I started using validators for Forms. I hope it is useful.
Link to application (with source view):
(Link will be active for a few days only)
I've downloaded the ZIP and will be importing it into Flex to have a detailed look! :)
Great example, rtalton! :)
Your comments made it easy reading. And I learned how to put that damn required star (*) when a field is required! :)) I always wondered how that's done!
Glad it was helpful. I just wish setting errorstring='"" didn't prevent the default tooltip from appearing. And, also on my wish list, a way to put the red asterisk on a required field's label to the left of the label's text, instead of it being forced to the right of the text. Guess I'm being too picky now.
I'm gonna have to get into extending components and overriding props, maybe. >shudder<
I made some changes to make this work better.
I used both the validator's triggerEvent property and the textInput's errorColor property to get the results I wanted. It works well. I change the triggerEvent just before clearing the textInput fields, then change the triggerEvent back. This keeps the validation from being called again while resetting the form.
Instead of setting the border color, I found the errorColor property, which is more to the point. Now I really don't need the "validHandler" to change the border color; it's done automatically.
Yup, it better optimized! :)
Only one thing now: if you Reset the form then select a text field, then select the other text field (selection means click in the field), the first one will retain its green border. Minor setback...
To add to what you were saying, I was searching for a way to move the red * to the right of the input field to be like this:
Name: [ text input] *
Clicking in a text field, then clicking away from it causes the validator to run (the valueCommit event runs). This is normal behavior. Since the field has required=true, the validation does not pass (no text was input), and the textInput is then highlighted with the error color. So you'd have to allow an empty field to validate to avoid the error color being shown, and this is probably not what you want.
One way to prevent this is to NOT validate the fields until you are ready to submit the entire Form's contents. But I prefer giving feedback as they move from field to field, instead of waiting until they submit all of the data by clicking the button.
Hm... I think setting triggerEvent='' in the validator will stop it from auto-validating and only work when you press the login button.