How to validate the radio button group? in flex

Question

How to validate the radio button is selected or not in flex 3?

if my question is wrong, please suggest me any thing regarding the validation of radio group.

Answer 1

Simply use a StringValidator:

        <mx:StringValidator id="myRadioButtonGroupValidator" 
        source="{myRadioButtonGroup}" 
        property="selectedValue" 
        required="true"/>

Answer 2

This is the way I solved the problem. If anything is wrong please leave a the comment.

<mx:NumberValidator id="radiogroupValidator" source="{radiogroup}" property="selectedValue" allowNegative="false" />

radio group source in mxml file

 <mx:RadioButtonGroup id="radiogroup"  itemClick="radiochangefunction(event)" selectedValue="-1" />

 <mx:RadioButton id="radiobtn1" groupName="radiogroup" label="Send Password to existing EmailId" value="0"/>
 <mx:RadioButton id="radiobtn2" groupName="radiogroup" label="Enter new EmailId" value="1"/>

The itemClick function

public function radiochangefunction(event):void
{
   radiogroup.selectedValue=event.currentEvent.selectedValue.toString();     
}

and finally in validation function

var isValidradiobutton:Boolean = (Validator.validateAll([radiogroupValidator]).length==0);

Answer 3

For Spark groups and RadioButtons things work slightly different. See the example below.

Note: For a HGroup as the example shows: The warning-sight will appear for errors but there will be no red-colored border be visible. If you set a RadioButton itself as listener you might get an ugly result and if you set a FormItem as target you will see nothing happen.

<fx:Declarations>

    <s:RadioButtonGroup id="myGroup" />

    <mx:StringValidator id="vLevel"
                        required="true"
                        source="{myGroup}"
                        property="selectedValue"
                        minLength="1"
                        maxLength="80"
                        listener="{grpLevel}"
                        />

</fx:Declarations>


<s:FormItem label="Level">
                <s:HGroup id="grpLevel">
                    <s:RadioButton group="{myGroup}" label="A"/>
                    <s:RadioButton group="{myGroup}" label="B"/>
                    <s:RadioButton group="{myGroup}" label="C"/>
                </s:HGroup>
</s:FormItem>                           

Answer 4

Listen to the itemClick event of the RadioButtonGroup. Within the handler, use selection or selectedValue property to know which RadioButton was clicked.

• selection - returns a reference to the selected RadioButton instance
• selectedValue - returns the value property of the selected RadioButton, if it is set. Otherwise, returns its label text.

Both of these properties return null if no RadioButton is selected.

A running example from livedocs

<?xml version="1.0"?>
<!-- Simple example to demonstrate RadioButtonGroup control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

        import mx.controls.Alert;
        import  mx.events.ItemClickEvent;

        // Event handler function to display the selected button
        // in an Alert control.
        private function handleCard(event:ItemClickEvent):void {
            if (event.currentTarget.selectedValue == "AmEx") {
                    Alert.show("You selected American Express") 
            } 
            else {
                if (event.currentTarget.selectedValue == "MC") {
                    Alert.show("You selected MasterCard") 
                } 
                else {
                    Alert.show("You selected Visa") 
                }
            } 
        }
        ]]>
    </mx:Script>

    <mx:Panel title="RadioButtonGroup Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">

        <mx:Label width="100%" color="blue" 
            text="Select a type of credit card."/>

        <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
        <mx:RadioButton groupName="cardtype" id="americanExpress" value="AmEx" 
            label="American Express" width="150" />
        <mx:RadioButton groupName="cardtype" id="masterCard" value="MC" 
            label="MasterCard" width="150" />
        <mx:RadioButton groupName="cardtype" id="visa" value="Visa" 
            label="Visa" width="150" />

    </mx:Panel>        
</mx:Application>