[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
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
View Code
1 <?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>