<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.controls.Alert;

]]>

</fx:Script>

<fx:Declarations>

<fx:Model id="creditcard">

<card>

<cardType>{drp.selectedItem.data}</cardType>

<cardNumber>{numberInput.text}</cardNumber>

</card>

</fx:Model>

<mx:CreditCardValidator id="creditcardV"

cardTypeSource="{creditcard}" cardTypeProperty="cardType"

cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"

trigger="{btn}" triggerEvent="click"

cardTypeListener="{drp}"

cardNumberListener="{numberInput}"

valid="Alert.show('Validation Successful');"/>

</fx:Declarations>

<s:Panel title="CreditCardValidator Example" width="550">

<mx:Form width="548" backgroundColor="#101446" color="#FFFFFF">

<mx:FormItem label="Card Type">

<s:DropDownList id="drp" width="160" prompt="Card Type" color="#000000">

<s:ArrayCollection id="cardData">

<fx:Object label="American Express" data="American Express"/>

<fx:Object label="MasterCard" data="MasterCard"/>

<fx:Object label="Visa" data="Visa"/>

</s:ArrayCollection>

</s:DropDownList>

</mx:FormItem>

<mx:FormItem label="Credit Card Number">

<s:TextInput id="numberInput" color="#000000"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn" label="Check Validation" chromeColor="#5F1B0C"/>

</mx:FormItem>

</mx:Form>

</s:Panel>