23 March 2010
|All||Flex (Download trial)|
The data that a user enters in a user interface control might or might not be appropriate for the application. In applications built with Adobe Flex, you use a validator to ensure the values in the fields of a form meet certain criteria. For example, you can use a validator to ensure that a user enters a valid phone number value, to ensure that a String value is longer than a set minimum length, or ensure that a ZIP code field contains the correct number of digits.
In typical client-server environments, data validation occurs on the server after data is submitted to it from the client. One advantage of using Flex validators is that they execute on the client, which lets you validate input data before transmitting it to the server. By using Flex validators, you eliminate the need to transmit data to and receive error messages back from the server, which improves the overall responsiveness of your application.
Note: Flex validators do not eliminate the need to perform data validation on the server, but provide a mechanism for improving performance by performing some data validation on the client.
Flex includes a set of validators for common types of user input data, such as ZIP codes, phone numbers, and credit card numbers.
You create validators in MXML by using a validator tag, such as
, in an
block. Validators use the following two properties to specify the item to validate:
source: Specifies the object that contains the property to validate. Set this to an instance of a component or a data model. You use data binding syntax in MXML to specify the value for the
property: A String that specifies the name of the source property that contains the value to validate. This property supports dot-delimited Strings for specifying nested properties.
You can set these properties in any of the following ways:
- In MXML when you use a validator tag
- In ActionScript by assigning values to the properties
- When calling the
Validator.validate()method to invoke a validator programmatically
Although any client-side validation is better than none, simply adding validators to your form and using their default behavior does not provide the most usable experience for your users. The Best practices for client-side validation demonstrates how to use validators to create a usable experience for your users.
You declare a validator in MXML using the
tag or the tag for the appropriate validator type. For example, to declare the standard PhoneNumberValidator validator, you use the
A Hosting Dangers Party Graduation Of
The default behavior of Flex validators is to listen for the
valueCommitevent on components. In Flex, you call the event that causes a validator to run a trigger.
Note:172 Of Index 2003 cdn 20 Using the default trigger for validators results in the behavior described in the Best practices for client-side validation section — the user receives validation feedback only after they leave a control. To give immediate feedback, you can manually trigger validation in response to the
changeevent instead of the
valueCommitevent. The Best practices for client-side validation section shows you how to do this.
A Hosting Dangers Party Graduation Of
You declare validators in ActionScript either in a script block within an MXML file, or in an ActionScript file, as the following example shows.
Flex provides you with several methods for validating data. This Quick Start describes a method of validating data that provides the most usable experience for your users.
A usable validation method must adhere, as a minimum, to the following user interface design principles for rich Internet applications.
- Prevent, don't scold: The user should not be allowed to submit a form that has validation errors. The Prevent, Don't Scold principle states that whenever you can accurately prevent users from making an error you should do so, rather than allowing them to make the error and scolding them about it afterward.
A blatant violation of this principle when doing client-side validation is to validate the user's input after the user has submitted a form. In a Flex application, you can create this behavior by triggering validators in response to the
clickevent of your form's submit button. Movie Up Nickelodeon Theatre Theater The Pop For Pittsburgh Holidays Celebrates Birthplace Post-gazette Historical Society A As Of
- Give immediate feedback: The user should get immediate feedback as they are interacting with a control. Users should receive positive feedback when the value of a control becomes valid, and they should receive negative feedback when its value becomes invalid. Giving the user feedback after they leave a control also violates the Prevent, Don't Scold principle.
When a control does not give the user immediate feedback, the user only finds out about the mistake after moving off the control. To correct the mistake, the user has to return to the control, thereby expending more effort. (This example also violates another, related principle, Respect User Effort.) Even more importantly, when a user is editing the value in a field that has a validation error on it, the user doesn't know whether the changes have made the control's value valid. The user has to move off the control to find out, and then return to it to change it again if it still isn't valid.The default behavior of Flex validators is to listen for the
valueCommitevent on components. This results in the behavior described previously, where the user receives validation feedback only after the user leaves a control. To give immediate feedback, you must manually trigger validation in response to the
changeevent instead of the
valueCommitevent.A Hosting Dangers Party Graduation Of
- Let the user work: Although giving immediate feedback is a good thing, your application should do so in a manner that doesn't interrupt the user's flow. Subtle hints that do not interrupt the user are usually best; you should use modal dialogs, which completely interrupt the user's flow, only when absolutely necessary.
- Innocent until proven guilty: The user should be warned about a validation error on a control only if they have had a chance to interact with that control. (In other words, you should not perform validation on controls that are in their initial state and initially display a form full of validation errors.) Similarly, resetting a form should remove all validation errors.
The following example demonstrates best practices in creating validation in Flex. It adheres to the four user interface design principles outlined above. The user is Innocent Until Proven Guilty and no validation errors are initially shown on the form. when the form is cleared. The user is immediately reassured when a control's value becomes valid (Give Immediate Feedback) and is prevented from submitting an invalid form (Prevent, Don't Scold.) Validation errors are displayed as subtle clues and help lead the user in the right direction while staying out of her way to Let The User Work.
- Two flags,
formIsEmptykeep track of the current state of the form. You bind the
enabledproperty of the Submit button to the
formIsValidflag, thereby preventing the user from submitting an invalid form. Similarly, you bind the
enabledproperty of the Clear form button to the
formIsEmptyflag so that it is only enabled if the form has input in it to be cleared.
focussedFormControlproperty holds a reference to the control that last dispatched a change event (in other words, the current control that the user is on.) The
validate()helper method uses this property to only display validation error messages for the current control. This is important in preventing validation error messages being shown for controls that the user has not yet interacted with.
- When the value of a form control changes, the validateForm() event handler method uses the
validate()helper method to validate all of the form controls. The value of the
formIsValidflag is set to true and the user is allowed to submit the form only if all validators are valid.
resetFocus()method uses the
setFocus()method of the FocusManager to place the focus on the first form item. The
resetFocus()method is called when the form is first loaded and, subsequently, when the form is cleared by the user. This is to save the user the effort of clicking on the first control before typing in it.Note: Due to a limitation in the way that browsers currently handle Flash content, the user does have to click on the Flash application once to move focus to it on the web page that it is embedded into.
clearFormHandler()method clears the values in the form controls and also resets the validators to a valid state.