Zipcodetrigger

In the following example, you create and invoke a validator programmatically in when a user clicks a Button control:
Notice that you are still using an event to trigger the performValidation() function that creates and invokes the validator, but the event itself does not automatically invoke the validator.

Any errors in the validator are shown on the associated component,
just as if you had triggered the validation directly by using an event.

<?xml version=”1.0″?>
<!– validators\ValTriggerProg.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
// Import ZipCodeValidator.
import mx.validators.ZipCodeValidator;
private var v:ZipCodeValidator = new ZipCodeValidator();
private function performValidation():void {
v.domain = "US or Canada";
// Set the listener property to the component
// used to display validation errors.
v.listener=myZip;
v.validate(myZip.text);}]]>
</mx:Script>
<mx:TextInput id=”myZip”/>
<mx:Button label=”Submit” click=”performValidation();”/>
</mx:Application>

Zipcode Trigger

Errormessagestyle for Phonenumber validator

<?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>

Errortip Color change

Zipcode validator with Radiobutton

In this example, you use a ZipCodeValidator to validate a ZIP code entered into a TextInput control. However, the validateData() function must first determine whether the ZIP code is for the U.S. or for Canada before performing the validation. In this example, the application uses the RadioButton controls to let the user specify the country as part of entering the ZIP code.

<?xml version=”1.0″?>
<!– validators\ConditionalVal.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
private var vEvent:ValidationResultEvent;
private function validateData():void {
if (country.selectedValue == "Canada") {
vEvent = zipCN.validate(zipInput.text);}
else{
vEvent = zipUS.validate(zipInput.text);}}]]>
</mx:Script>
<mx:ZipCodeValidator id=”zipUS”
domain=”US Only”
listener=”{zipInput}”/>
<mx:ZipCodeValidator id=”zipCN”
domain=”US or Canada”
listener=”{zipInput}”/>
<mx:RadioButtonGroup id=”country”/>
<mx:RadioButton groupName=”country” label=”US”/>
<mx:RadioButton groupName=”country” label=”Canada”/>
<mx:TextInput id=”zipInput” width=”15%” height=”10%”/>
<mx:Button label=”Submit” click=”validateData();”/>
</mx:Application>

ZipcodeValidator with radiobutton

Customevent Listener in PhoneValidator

<?xml version=”1.0″?>
<!– validators\ValCustomEventListener –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
// Import event class.
import flash.events.Event;
// Define vars for storing text colors.
private var errorTextColor:Object = "red";
private var currentTextColor:Object;
// Initialization event handler for getting default text color.
private function myCreationComplete(eventObj:Event):void {
currentTextColor = getStyle('color');}
// For an invalid event, change the text color.
private function handleInvalidVal(eventObject:Event):void {
setStyle('color', errorTextColor);}
// For a valid event, restore the text color.
private function handleValidVal(eventObject:Event):void {
setStyle('color', currentTextColor);}
]]></mx:Script>
<mx:PhoneNumberValidator source=”{phoneInput}” property=”text”/>
<mx:TextInput id=”phoneInput”
initialize=”myCreationComplete(event);”
invalid=”handleInvalidVal(event);”
valid=”handleValidVal(event);” width=”15%” height=”10%”/>
<mx:TextInput id=”zipInput” width=”15%” height=”10%”/>
</mx:Application>

Customeventlistener with errormessage

EventListener in Zipcodevalidator

<?xml version=”1.0″?>
<!– validators\ValEventListener.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
// Import event class
import mx.events.ValidationResultEvent;
private function handleValid(event:ValidationResultEvent):void {
if(event.type==ValidationResultEvent.VALID)
submitButton.enabled = true;
else
submitButton.enabled = false;}
// Submit form is everything is valid.
private function submitForm():void {
// Handle submit.}
]]></mx:Script>
<mx:ZipCodeValidator
source=”{inputZip}” property=”text”
valid=”handleValid(event);”
invalid=”handleValid(event);”/>
<mx:TextInput id=”inputZip”/>
<mx:TextInput id=”inputPn”/>
<mx:Button id=”submitButton”
label=”Submit”
enabled=”false”
click=”submitForm();”/>
</mx:Application>

ZipcodeValidator with errormessage

Zipcode Validator using event listener

TriggerEvents in zipcodevalidator

You may want to inspect the return value from the validate() method to perform some action when the validation succeeds or fails. The validate() method returns an event object with a type defined by the ValidationResultEvent class. The ValidationResultEvent class defines several properties, including the type property. The type property of the event object contains either ValidationResultEvent.VALID or ValidationResultEvent.INVALID, based on the validation  results. You can use this property as part of your validation logic, as the following example shows:

<?xml version=”1.0″?>
<!– validators\ValTriggerProgProcessReturnResult.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
mx:Script>
<![CDATA[
// Import the ValidationResultEvent class.
import mx.events.ValidationResultEvent;
import mx.validators.ZipCodeValidator;
public var v:ZipCodeValidator = new ZipCodeValidator();
// Define variable for storing the validation event object.
public var vResult:ValidationResultEvent;
`public function performValidation():void {
v.domain = "US or Canada";
v.listener=myZip;
vResult = v.validate(myZip.text);

if (vResult.type==ValidationResultEvent.VALID) {
// Validation succeeded.
myTA.text='OK';}
else {
// Validation failed.
myTA.text='Fail';
}}
]]></mx:Script>
<mx:TextInput id=”myZip”/>
<mx:Button label=”Submit” click=”performValidation();”/>
<mx:TextArea id=”myTA”/>
</mx:Application>

ZipcodeValidator using Triggerevents

Triggerevent with zipcode validator

Setting Listener in Zipcodevalidator

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” width=”10%” height=”10%”/>
<mx:TextArea id=”errorMsg” width=”10%” height=”10%”/>
</mx:Application>

Setting Listener for Zipcode Validator

Resuable Zipcode validator

You can define a reusable validator so that you can use it to validate
multiple fields. To make it reusable, you programmatically set the source and property properties to specify the field to validate, or pass that information to the validate() method, as the following example shows:

In this example, you have two address areas for a customer: one for a billing address and one for a shipping address. Both addresses have a ZIP code field, so you can reuse  a single ZipCodeValidator for both fields. The event listener for the focusOut event passes the field to validate to the validate() method.

<?xml version=”1.0″?>
<!– validators\ReusableVals.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import flash.events.Event;
private function performValidation(eventObj:Event):void {
zipV.listener=eventObj.currentTarget;
zipV.validate(eventObj.currentTarget.text);
}]]></mx:Script>
<mx:ZipCodeValidator id=”zipV”
triggerEvent=”"/>
<mx:TextInput id=”shippingZip”
focusOut=”performValidation(event);”/>
<mx:TextInput id=”billingZip”
focusOut=”performValidation(event);”/>
</mx:Application>

ReusableZipcode validator

Regularexpression Validator

In this example, you specify the regular expression in the TextInput control named source, and bind it to the expression property of the validator. You can modify the regular expression by entering a new expression in the TextInput control. A value of g for the flags property specifies to find multiple matches in the input field.

<?xml version=”1.0″?>
<!– validators\RegExpExample.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ValidationResultEvent;
import mx.validators.*;
private function handleResult(event:ValidationResultEvent):void {
if (event.type == "valid"){
// For valid events, the results Array contains
// RegExpValidationResult objects.
var xResult:RegExpValidationResult;
myTA.text="";
for (var i:uint = 0; i < event.results.length; i++){
xResult = event.results[i];
myTA.text=myTA.text + xResult.matchedIndex + ” ” +
xResult.matchedString + “\n”;
}}
else{
// Not necessary, but if you needed to access it,
// the results array contains ValidationResult objects.
var result:ValidationResult;
myTA.text=”";
}}
]]></mx:Script>
<mx:RegExpValidator id=”regExpV”
source=”{exp}” property=”text”
flags=”g”
expression=”{source.text}”
valid=”handleResult(event);”
invalid=”handleResult(event);”/>
<mx:Form>
<mx:FormItem label=”Search string”>
<mx:TextInput id=”exp”/>
</mx:FormItem>
<mx:FormItem label=”Regular expression”>
<mx:TextInput id=”source” text=”ABC\d”/>
</mx:FormItem>
<mx:FormItem label=”Results”>
<mx:TextArea id=”myTA”/>
</mx:FormItem>
</mx:Form>
</mx:Application>

custom number validator

In the following example, you let the user set the minimum and maximum values  of a NumberValidator:

<?xml version=”1.0″?>
<!– validators\ConfigWithBinding.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:NumberValidator
source=”{inputA}”
property=”text”
minValue=”{Number(inputMin.text)}”
maxValue=”{Number(inputMax.text)}”/>
<mx:TextInput id=”inputA”/>
<mx:TextInput id=”inputMin” text=”1″/>
<mx:TextInput id=”inputMax” text=”10″/>
</mx:Application>

Numbervalidator with errormessage

NumberValidator with error