Flex Examples

In a previous example, “Using the ZipCodeValidator class to validate US or Canadian zip codes”, we saw how you could validate US or US/Canadian zip codes using the Flex ZipCodeValidator class.

The following example shows how you can use the new “Canada only” zip code validator domain type to ensure users only enter a Canadian postal code.

This example requires Flex SDK 3.2.0.3349 or later. To download the latest version of the Flex SDK, see http://opensource.adobe.com/…/flexsdk/Downloads/.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/02/using-the-zipcodevalidator-class-to-validate-us-or-canadian-zip-codes-redux/ -->
<mx:Application name="ZipCodeValidator_domain_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;
            import mx.validators.ZipCodeValidatorDomainType;

            private function zipCodeValidator_valid(evt:ValidationResultEvent):void {
                Alert.show(evt.type);
            }

            private function zipCodeValidator_invalid(evt:ValidationResultEvent):void {
                Alert.show(evt.message);
            }
        ]]>
    </mx:Script>

    <mx:ZipCodeValidator id="zipCodeValidator"
            domain="{radioButtonGroup.selectedValue}"
            valid="zipCodeValidator_valid(event);"
            invalid="zipCodeValidator_invalid(event);" />

    <mx:RadioButtonGroup id="radioButtonGroup" />

    <mx:Form defaultButton="{button}">
        <mx:FormItem label="Zip code:">
            <mx:TextInput id="textInput" />
        </mx:FormItem>
        <mx:FormItem label="Domain type:" direction="vertical">
            <mx:RadioButton label="{ZipCodeValidatorDomainType.US_OR_CANADA}"
                    value="{ZipCodeValidatorDomainType.US_OR_CANADA}"
                    group="{radioButtonGroup}"
                    selected="true" />
            <mx:RadioButton label="{ZipCodeValidatorDomainType.US_ONLY}"
                    value="{ZipCodeValidatorDomainType.US_ONLY}"
                    group="{radioButtonGroup}" />
            <mx:RadioButton label="{ZipCodeValidatorDomainType.CANADA_ONLY}"
                    value="{ZipCodeValidatorDomainType.CANADA_ONLY}"
                    group="{radioButtonGroup}" />
        </mx:FormItem>
        <mx:FormItem width="100%"
                horizontalAlign="right">
            <mx:Button id="button"
                    label="Validate"
                    click="zipCodeValidator.validate(textInput.text);"/>
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/02/using-the-zipcodevalidator-class-to-validate-us-or-canadian-zip-codes-redux/ -->
<mx:Application name="ZipCodeValidator_domain_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItemDirection;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.RadioButton;
            import mx.controls.TextInput;
            import mx.controls.RadioButtonGroup;
            import mx.validators.ZipCodeValidator;
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;
            import mx.validators.ZipCodeValidatorDomainType;

            private var zipCodeValidator:ZipCodeValidator;
            private var radioButtonGroup:RadioButtonGroup;
            private var textInput:TextInput;
            private var radioButton1:RadioButton;
            private var radioButton2:RadioButton;
            private var radioButton3:RadioButton;
            private var button:Button;

            private function init():void {
                zipCodeValidator = new ZipCodeValidator();
                zipCodeValidator.addEventListener(ValidationResultEvent.VALID, zipCodeValidator_valid);
                zipCodeValidator.addEventListener(ValidationResultEvent.INVALID, zipCodeValidator_invalid);

                radioButtonGroup = new RadioButtonGroup();

                textInput = new TextInput();

                radioButton1 = new RadioButton();
                radioButton1.label = ZipCodeValidatorDomainType.US_OR_CANADA;
                radioButton1.value = ZipCodeValidatorDomainType.US_OR_CANADA;
                radioButton1.group = radioButtonGroup;
                radioButton1.selected = true;

                radioButton2 = new RadioButton();
                radioButton2.label = ZipCodeValidatorDomainType.US_ONLY;
                radioButton2.value = ZipCodeValidatorDomainType.US_ONLY;
                radioButton2.group = radioButtonGroup;

                radioButton3 = new RadioButton();
                radioButton3.label = ZipCodeValidatorDomainType.CANADA_ONLY;
                radioButton3.value = ZipCodeValidatorDomainType.CANADA_ONLY;
                radioButton3.group = radioButtonGroup;

                button = new Button();
                button.label = "Validate";
                button.addEventListener(MouseEvent.CLICK, button_click);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "Zip code:";
                formItem1.addChild(textInput);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "Domain type:";
                formItem2.direction = FormItemDirection.VERTICAL;
                formItem2.addChild(radioButton1);
                formItem2.addChild(radioButton2);
                formItem2.addChild(radioButton3);

                var formItem3:FormItem = new FormItem();
                formItem3.percentWidth = 100;
                formItem3.setStyle("horizontalAlign", "right");
                formItem3.addChild(button);

                var form:Form = new Form();
                form.defaultButton = button;
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);
                addChild(form);
            }

            private function button_click(evt:MouseEvent):void {
                zipCodeValidator.domain = radioButtonGroup.selectedValue.toString();
                zipCodeValidator.validate(textInput.text);
            }

            private function zipCodeValidator_valid(evt:ValidationResultEvent):void {
                Alert.show(evt.type);
            }

            private function zipCodeValidator_invalid(evt:ValidationResultEvent):void {
                Alert.show(evt.message);
            }
        ]]>
    </mx:Script>

</mx:Application>