How to validate radio buttons

[source adress]http://cookbooks.adobe.com/post_How_to_validate_radio_buttons_2-5962.html?w=rel

Problem

Flex offers great supports for data entry validation of controls like TextInput but for other controls like radio buttons or combo-boxes, you need to add a bit more. This entry shows how to validate radio buttons, i.e. to ensure that one radio button from a group is selected.

Solution

Standard Validators support radio buttons validation just fine but there is no built-in way to visually inform user that the validation failed (red border, error tooltips etc.) To do this write your own RadioButtonGroupValidator-Class

Detailed explanation

Here is a rough outline of what you need to do in order to validate radio buttons (full example will follow):

   1. Create radio buttons normally (together with RadioButtonGroup).
   2. Create a RadioButtonGroupValidator and validate RadioButtonGroup's selectedValue property every time it changes.

Put together, the example should look something like this

 

Application

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    xmlns:validators="de.ham.devas.validators.*"    layout="vertical" horizontalAlign="center" verticalAlign="top">        <mx:Script>        <![CDATA[            import mx.controls.Alert;            import mx.events.ValidationResultEvent;            import mx.events.ItemClickEvent;                                    private function onSubmit():void {                var validResults:ValidationResultEvent = vRG.validate();                if (validResults.type == ValidationResultEvent.INVALID) {                    lbMsg.text = "Error!";                } else {                    lbMsg.text = "OK";                }            }                        private function onReset():void {                vRG.enabled = false;                rbg.selection = null;                vRG.enabled  = true;                lbMsg.text = "";            }                    ]]>    </mx:Script>        <validators:RadioButtonGroupValidator id="vRG"        source="{rbg}" property="selectedValue" required="true" />        <mx:Panel label="RadioButtonGroup validation" width="200" paddingLeft="10" paddingRight="10">        <mx:RadioButtonGroup id="rbg" />        <mx:RadioButton groupName="rbg" value="flex15" label="Flex 1.5" />        <mx:RadioButton groupName="rbg" value="flex2" label="Flex 2" />        <mx:RadioButton groupName="rbg" value="flex3" label="Flex 3" />                <mx:Label id="lbMsg" />                <mx:ControlBar>            <mx:Button label="Submit" click="onSubmit()" />            <mx:Button label="Reset" click="onReset();" />            </mx:ControlBar>    </mx:Panel>    </mx:Application>

Validator

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"	xmlns:validators="de.ham.devas.validators.*"	layout="vertical" horizontalAlign="center" verticalAlign="top">		<mx:Script>		<![CDATA[			import mx.controls.Alert;			import mx.events.ValidationResultEvent;			import mx.events.ItemClickEvent;									private function onSubmit():void {				var validResults:ValidationResultEvent = vRG.validate();				if (validResults.type == ValidationResultEvent.INVALID) {					lbMsg.text = "Error!";				} else {					lbMsg.text = "OK";				}			}						private function onReset():void {				vRG.enabled = false;				rbg.selection = null;				vRG.enabled  = true;				lbMsg.text = "";			}					]]>	</mx:Script>		<validators:RadioButtonGroupValidator id="vRG"		source="{rbg}" property="selectedValue" required="true" />		<mx:Panel label="RadioButtonGroup validation" width="200" paddingLeft="10" paddingRight="10">		<mx:RadioButtonGroup id="rbg" />		<mx:RadioButton groupName="rbg" value="flex15" label="Flex 1.5" />		<mx:RadioButton groupName="rbg" value="flex2" label="Flex 2" />		<mx:RadioButton groupName="rbg" value="flex3" label="Flex 3" />				<mx:Label id="lbMsg" />				<mx:ControlBar>			<mx:Button label="Submit" click="onSubmit()" />			<mx:Button label="Reset" click="onReset();" />			</mx:ControlBar>	</mx:Panel>	</mx:Application>