Understanding User-Input Validation In Flex 3
Conducting client-side validation is a key strength of Flex. From a usability point-of-view, you want your application to do as much prevalidation as possible. This helps to avoid aggravating situations in which a user spends a fair amount of time filling out a large form then clicks the submit button, only to find something is wrong with the input.
Wouldn’t it be nice to have all the validation done prior to submitting a form to avoid wasting time? Flex to the rescue! Flex provides a real-time validation mechanism that unobtrusively accomplishes that goal.
Have you ever tried entering a comment on a blog engine that uses the captcha antispam mechanism? Captcha works by intentionally distorting text characters and mixing some graphical noise in the background making it almost impossible for a machine to decipher. Only human intellect can make sense of the image and read the characters. See figure 1.
Figure 1 HTML-based input validation has its limits as this captcha image demonstrates how annoying this can be to users.
After you enter your comment in the blog, the application challenges you to correctly enter the letters embedded in the image. This becomes frustrating to the user as they feel they’re repeating unnecessary steps and the validation takes time.
Flex makes validating easy with built-in components to do the hard work for you, and offers a number of approaches to invoke them. The following list explains common ways to validate user input:
- Real-Time validation—With every keystroke or mouse interaction the application checks to see the data is input as expected, or required.
- Committed-Value validation—Similar to real time, except instead of evaluating every keystroke, the application waits until the user has filled out the field completely and commits his entry (for example, by pressing Enter, or Tab to change fields).
- Pass-Through validation—Usually the result of hitting a submit button, this type of validation passes through all the form inputs to make sure everything is validated at once.
- Scripted validation—Using ActionScript you can dynamically create validators, and even reuse the same validator on multiple elements.
In all of these cases you’re controlling when the validation occurs. If you’re not in compliance, Flex highlights the field (in an unobtrusive way) and displays a friendly mouse-over message indicating what the problem is (figure 2).
Figure 2 How Flex implements validation by alerting the user in a friendly manner.
Keep in mind that we’re not talking about automatic enforcement. Validation is about alerting both the user and the developer that certain criteria haven’t been met. The developer needs to determine how to enforce the validation by prompting the user as to what needs to be done to comply with the application’s requirements.
For the most part, validation is clear-cut, but there are a few more items to cover to round out your understanding of how validators work.
Does a validator always check all criteria?
What if the user types in something that fails to meet more than one of the requirements. Will all of the error messages show? No. Flex runs through its laundry list, checking one thing after another and then the moment one of the tests fail, it stops on that issue.
Validating what was entered vs. criteria matching
To best understand validators, keep in mind that although they can be used to verify values entered are of type—for example, what was entered is a date, or a credit card number, or telephone number—they can also be used for the more important task of determining if the value matches certain criteria, such as checking to ensure a date entered by the user is within a certain time frame.
Controlling what triggers validation
To keep things simple we labeled some high-level approaches to validation (for instance, real-time validation), but using the trigger and triggerEvent properties you can cause validation to initiate off any event you want.
In our examples, we used the id of a button for the trigger, and its corresponding click triggerEvent.
How do you know what events are available for you to use? In Flex Builder you can view components in which you’re interested via the API Reference which can be accessed by clicking Help > Search, or click the component and Shift+F2.
Another approach is to allocate an area within your Flex Builder workspace for a dynamic help view (see chapter 2), which will automatically display the reference.
Scroll down to the section titled events. Anything you see listed (figure 3) is fair game. For example, you could save the user a click by using the button’s mouseOver event as a trigger.
This article is taken from the forthcoming book Flex 3 in Action by Tariq Ahmed with Jon Hirschi, and Faisal Abid, (Manning, 2008). This 545-page easy-to-follow, hands-on tutorial goes beyond feature coverage and helps you put Flex 3 to work in real day-to-day tasks. This article provides an examination of validation—a valuable mechanism for providing a positive experience to your users by minimizing the amount of back-and-forth activity between their client device and a server. the Author Forum, and other resources, go to .
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)