I just started working with the new version of Flash Builder and Flex. I’m trying to use all Spark elements in order to get familiar with the new additions to the language. I ran into a problem when trying to use validators on Radio Buttons. After searching the web, I found almost nothing on how to deal with radio button validation. After experimenting and making a visit to the Adobe Flex forums, I was able to figure out what I was doing wrong.

With most form items, they can listen for the child elements validation error. However, with RadioButtons, it works a bit differently. You have to put the RadioButtons inside of a HGroup or VGroup and set that group as the RadioButton validator’s listener.

I have attached a working example below that will illustrate how to validate various elements in a form. View Source is enabled if you would like to download or view the code using Flex source view.

Visit my thread on this topic at Adobe Flex Forums.

 ActionScript 3 | 
 copy code |
?
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
<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"
               xmlns:views="com.views.*"
               width="732" height="383" initialize="init();" name="Spark_Form_Validator_test"
               viewSourceURL="srcview/index.html">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.validators.Validator;
 
            [Binadble]private var myDP:ArrayCollection = new ArrayCollection();
            [Bindable]private var errors:Array;
 
            //Application Initilization
            private function init():void{
                var newItem:Object = new Object();
                newItem.data = 1;
                newItem.label = "Hello World";
                myDP.addItem(newItem);
            }
 
            //Validate the Validators Array
            private function validateForm():void{
                errors = new Array();
                errors = Validator.validateAll(validatorsArray);
                if (errors.length == 0){
                    Alert.show('All fields are valid.'); 
                }
                else{
                    Alert.show('Please complete the required fields.','See required fields');
                }
            }
 
            //Converts ComboBox text into and Object
            private function convertLabel(myString:String):Object{
                var comboObj:Object = new Object();
                comboObj.data = myComboBox.dataProvider.length + 1;
                comboObj.label = myString;
                return comboObj;
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>        
        <!--Array of Validators-->
        <fx:Array id="validatorsArray">
            <mx:StringValidator id="radioValidator" source="{group1}" property="selection" required="true" listener="{myGroup}"  />
            <mx:StringValidator id="textValidator" source="{myTextField}" property="text" required="true" />
            <s:NumberValidator id="dropdownValidator" source="{myDropDown}" property="selectedIndex" required="true" minValue="0" 
                               lessThanMinError="Please select an item"/>
            <mx:StringValidator id="comboValidator" source="{myComboBox}" property="selectedItem" required="true" listener="{myGroup2}"
                                requiredFieldError="Please enter or select an item." />
            <s:NumberValidator id="stepperValidator" source="{myStepper}" property="value" required="true" minValue="1" 
                               lessThanMinError="Minimum Value is 1"/>
        </fx:Array>
 
        <!--Radio Button Group-->
        <s:RadioButtonGroup id="group1" />
    </fx:Declarations>
 
<s:Panel x="38" y="17" width="660" height="338" title="Spark Validation Example">
    <s:Form id="form1" x="10" y="8" width="638" height="287">
        <s:layout>
            <s:FormLayout/>
        </s:layout>
 
        <!--Radio Button's _________________________________________________________-->
        <s:FormItem id="formItem1" width="100%" label="Validate Radio's:" required="true">
            <s:layout>
                <s:HorizontalLayout/>
            </s:layout>
 
            <s:HGroup id="myGroup">
                <s:RadioButton x="157" y="195" label="Selection 1" groupName="group1"/>
                <s:RadioButton x="157" y="221" label="Selection 2" groupName="group1"/>
                <s:RadioButton x="157" y="247" label="Selection 3" groupName="group1"/>
            </s:HGroup>
        </s:FormItem>
 
        <!--TextField________________________________________________________-->
        <s:FormItem  id="formItem2" width="100%" label="Validate TextField:" required="true">
            <s:TextInput id="myTextField" />
        </s:FormItem>
 
        <!--DropDownList________________________________________________________-->
        <s:FormItem id="formItem3" width="100%" label="Validate DropDownList:" required="true">
            <s:DropDownList id="myDropDown" width="155" labelField="label" prompt="---Choose One---">
                <s:dataProvider>
                    <s:ArrayCollection source="myDP"/>                
                </s:dataProvider>
            </s:DropDownList>
        </s:FormItem>
 
        <!--ComboBox________________________________________________________-->
        <s:FormItem width="100%" label="Validate ComboBox:" required="true">
            <s:HGroup id="myGroup2">
                <s:ComboBox id="myComboBox" labelField="label" labelToItemFunction="convertLabel">
                    <s:dataProvider>
                        <s:ArrayCollection source="myDP"/>
                    </s:dataProvider>
                </s:ComboBox>
            </s:HGroup>
        </s:FormItem>
 
        <!--Numeric Stepper________________________________________________________-->
        <s:FormItem width="100%" label="Validate NumericStepper:" required="true">
            <s:NumericStepper id="myStepper"/>
        </s:FormItem>
 
        <!--Validate Button________________________________________________________-->
        <s:FormItem width="100%">
            <s:layout>
                <s:HorizontalLayout/>
            </s:layout>
            <s:Button id="btnValidat" x="167" y="295" label="Validate Form" click="validateForm();"/>
        </s:FormItem>        
    </s:Form>    
</s:Panel>
 
</s:Application>