[flexcoders] Radio Buttons and Validation

[flexcodemonkey]

I'm trying to do something I thought would be simple.  I have a form with radio 
buttons and some user input for each button.  I want to validate the user 
input, but not show the red invalid box on any input that is part of a radio 
button not selected.  I basically added a change handler for the radio buttons 
and clear out the previous errors for the fields.  This is working, but only 
for the fist time.  If a user types in invalid data, it shows a red box with an 
error.  If they change radio buttons, the first box clears, and, if they enter 
invalid data in the second box, and error is shown as expected.  Now select the 
fist radio button again and enter in invalid data.  The validation code does 
try to validate it, and the ValidationResultEvent.type is INVALID, but no red 
box or error is displayed anymore.  Below is my code which may help understand 
what I'm doing.  I'm sure it is due to setting the errorString of the control 
to an empty string, but I found this was recommended as a way to clear out 
previous errors.  What do I do to validate again?
----------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<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" 
minWidth="955" minHeight="600">

        <fx:Script>
                <![CDATA[
                        import mx.events.ValidationResultEvent;
                        protected function 
btnTest_clickHandler(event:MouseEvent):void
                        {
                                var valResult:ValidationResultEvent;
                                
                                valResult = rangeValidator1.validate();
                                if (valResult.type == 
ValidationResultEvent.INVALID) {
                                        return;
                                }

                                valResult = rangeValidator2.validate();
                                if (valResult.type == 
ValidationResultEvent.INVALID) {
                                        return;
                                }
                        }
                        
                        protected function clearValidation():void {
                                tiUserInput1.errorString = "";
                                tiUserInput2.errorString = "";
                        }
                ]]>
        </fx:Script>

        <fx:Declarations>
                <s:RadioButtonGroup id="radiogroup1"/>
                <mx:NumberValidator id="rangeValidator1" minValue="10" 
maxValue="29" source="{tiUserInput1}" property="text" />
                <mx:NumberValidator id="rangeValidator2" minValue="40" 
maxValue="59" source="{tiUserInput2}" property="text" />
        </fx:Declarations>
        <s:Panel title="Some User Input Form"
                         width="400" height="250"
                         horizontalCenter="0" verticalCenter="0">
                <s:layout>
                        <s:VerticalLayout paddingLeft="20" paddingRight="20" 
paddingTop="20" paddingBottom="20"/>
                </s:layout>
                <s:controlBarContent>
                        <s:Button id="btnTest" label="Test" 
click="btnTest_clickHandler(event)"/>
                
                </s:controlBarContent>
                <s:RadioButton id="rb1" label="Button 1" 
groupName="radiogroup1" change="clearValidation()" selected="true"/>
                <mx:Form paddingLeft="20" paddingRight="5" paddingTop="5" 
paddingBottom="5">
                        <mx:FormItem label="Numbers 10-29 Only:" left="30" 
enabled="{rb1.selected}">
                                <s:TextInput id="tiUserInput1" restrict="0-9" 
maxChars="2"/>
                        </mx:FormItem>
                </mx:Form>

                <s:RadioButton id="rb2" label="Button 2" 
groupName="radiogroup1" change="clearValidation()"/>
                <mx:Form paddingLeft="20" paddingRight="5" paddingTop="5" 
paddingBottom="5" x="10" y="102">
                        <mx:FormItem label="Numbers 40-59 Only:" left="30" 
enabled="{rb2.selected}">
                                <s:TextInput id="tiUserInput2" restrict="0-9" 
maxChars="2"/>
                        </mx:FormItem>
                </mx:Form>
        </s:Panel>
</s:Application>