Flex Examples

The following example shows how you can validate a number as an integer or real (floating point) number by setting the domain property on a NumberValidator instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/30/validating-integers-using-the-numbervalidator-class/ -->
<mx:Application name="NumberValidator_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;

            private function numberValidator_invalid(evt:ValidationResultEvent):void {
                Alert.show(evt.message);
            }

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

    <mx:NumberValidator id="numberValidator"
            domain="{comboBox.selectedItem}"
            source="{textInput}"
            property="text"
            trigger="{button}"
            triggerEvent="click"
            invalid="numberValidator_invalid(event);"
            valid="numberValidator_valid(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="domain:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[real,int]" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Form defaultButton="{button}">
        <mx:FormItem direction="horizontal">
            <mx:TextInput id="textInput"
                    restrict="0-9\.\-"
                    maxChars="10" />
            <mx:Button id="button"
                    label="validate" />
        </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/08/30/validating-integers-using-the-numbervalidator-class/ -->
<mx:Application name="NumberValidator_domain_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.FormItemDirection;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.controls.TextInput;
            import mx.events.ValidationResultEvent;
            import mx.validators.NumberValidator;

            private var numberValidator:NumberValidator;
            private var comboBox:ComboBox;
            private var textInput:TextInput;
            private var button:Button;

            private function init():void {
                comboBox = new ComboBox();
                comboBox.dataProvider = ["real", "int"];
                comboBox.selectedIndex = 0;
                comboBox.addEventListener(Event.CHANGE, comboBox_change);

                textInput = new TextInput();
                textInput.restrict = "0-9\.\-";
                textInput.maxChars = 10;

                button = new Button();
                button.label = "validate";

                numberValidator = new NumberValidator();
                numberValidator.domain = comboBox.selectedItem.toString();
                numberValidator.source = textInput;
                numberValidator.property = "text";
                numberValidator.trigger = button;
                numberValidator.triggerEvent = MouseEvent.CLICK;
                numberValidator.addEventListener(ValidationResultEvent.INVALID, numberValidator_invalid);
                numberValidator.addEventListener(ValidationResultEvent.VALID, numberValidator_valid);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "domain:";
                formItem1.addChild(comboBox);

                var form1:Form = new Form();
                form1.styleName = "plain";
                form1.addChild(formItem1);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form1);
                addChildAt(appControlBar, 0);

                var formItem2:FormItem = new FormItem();
                formItem2.direction = FormItemDirection.HORIZONTAL;
                formItem2.addChild(textInput);
                formItem2.addChild(button);

                var form2:Form = new Form();
                form2.defaultButton = button;
                form2.addChild(formItem2);
                addChild(form2);
            }

            private function comboBox_change(evt:Event):void {
                numberValidator.domain = comboBox.selectedItem.toString();
            }

            private function numberValidator_invalid(evt:ValidationResultEvent):void {
                Alert.show(evt.message);
            }

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

</mx:Application>