| Flex 2 Developer's Guide > Flex Data Features > Validating Data > Working with validation errors | |||
|
|||
|
|||
|
|||
Subclasses of the UIComponent base class, which include the Flex user-interface components, generally handle validation failures by changing their border color and displaying an error message. When validation succeeds, components hide any existing validation error message and remove any border.
This section describes how to configure the content of the error messages and the display characteristics of validation errors.
All Flex validators define default error messages. In most cases, you can override these messages with your own.
The default error messages for all validators are defined using resource bundles so that you can easily change them as part of localizing your application. You can override the default value of an error message for all validator objects created from a validator class by editing the resource bundles associated with that class.
You edit the error message for a specific validator object by writing a String value to a property of the validator. For example, the PhoneNumberValidator defines a default error message to indicate that an input phone number has the wrong number of digits. You can override the default error message for a specific PhoneNumberValidator object by assigning a new message string to the wrongLengthError property, as the following example shows:
<?xml version="1.0"?>
<!-- validators\PNValidatorErrMessage.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Define the PhoneNumberValidator. -->
<mx:PhoneNumberValidator id="pnV"
source="{phoneInput}" property="text"
wrongLengthError="Please enter a 10-digit number."/>
<!-- Define the TextInput control for entering the phone number. -->
<mx:TextInput id="phoneInput"/>
<mx:TextInput id="zipCodeInput"/>
</mx:Application>
By default, the validation error message that appears when you move the mouse pointer over a user-interface control has a red background. You can use the ErrorTip style to change the color, as the following example shows:
<?xml version="1.0"?>
<!-- validators\PNValidatorErrMessageStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Use blue for the error message. -->
<mx:Style>
.errorTip { borderColor: #0000FF}
</mx:Style>
<!-- Define the PhoneNumberValidator. -->
<mx:PhoneNumberValidator id="pnV"
source="{phoneInput}" property="text"
wrongLengthError="Please enter a 10-digit number."/>
<!-- Define the TextInput control for entering the phone number. -->
<mx:TextInput id="phoneInput"/>
<mx:TextInput id="zipCodeInput"/>
</mx:Application>
In this example, the error message appears as light green.
The UIComponent class defines the errorString property that you can use to show a validation error for a component, without actually using a validator class. When you write a String value to the UIComponent.errorString property, Flex draws a red border around the component to indicate the validation error, and the String appears in a ToolTip as the validation error message when you move the mouse over the component, just as if a validator detected a validation error.
To clear the validation error, write an empty String, " ", to the UIComponent.errorString property.
|
NOTE |
|
Writing a value to the |
For information on writing custom ToolTip controls, see Using ToolTips.
The errorString property is useful when you want to reset a field that is a source for validation, and prevent a validation error from occurring when you reset the field.
For example, you might provide a form to gather user input. Within your form, you might also provide a button, or other mechanism, that lets the user reset the form. However, clearing form fields that are tied to validators could trigger a validation error. The following example uses the errorString property as part of resetting the text property of a TextInput control to prevent validation errors when the form resets:
<?xml version="1.0"?>
<!-- validators\ResetVal.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
private var vResult:ValidationResultEvent;
// Function to validate data and submit it to the server.
private function validateAndSubmit():void {
// Validate the required fields.
vResult = zipV.validate();
if (vResult.type==ValidationResultEvent.INVALID)
return;
// Submit data to server.
}
<!-- Clear the input controls and the errorString property
when resetting the form. -->
private function resetForm():void {
zipInput.text = '';
zipInput.errorString = '';
}
]]>
</mx:Script>
<mx:ZipCodeValidator id="zipV"
source="{zipInput}"
property="text"/>
<mx:Form>
<mx:FormItem label="Enter ZIP code">
<mx:TextInput id="zipInput"/>
</mx:FormItem>
<mx:FormItem label="Enter Country">
<mx:TextInput id="cntryInput"/>
</mx:FormItem>
</mx:Form>
<!-- Trigger submit. -->
<mx:Button label="Submit" click="validateAndSubmit();"/>
<!-- Trigger reset. -->
<mx:Button label="Reset" click="resetForm();"/>
</mx:Application>
In this example, the function that clears the form items also clears the errorString property associated with each item, clearing any validation errors.
All validators support a listener property. When a validation occurs, Flex applies visual changes to the object specified by the listener property.
By default, Flex sets the listener property to the value of the source property. That means that all visual changes that occur to reflect a validation event occur on the component being validated. However, you might want to validate one component but have validation results apply to a different component, as the following example shows:
<?xml version="1.0"?>
<!-- validators\SetListener.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ZipCodeValidator id="zipV"
source="{zipCodeInput}"
property="text"
listener="{errorMsg}"/>
<mx:TextInput id="zipCodeInput"/>
<mx:TextArea id="errorMsg"/>
</mx:Application>
Flex 2.01
