1 Reply Latest reply on Nov 18, 2009 12:17 PM by Gregory Lafrance

    Validating RadioButton Group Flex 3

    choisington

      I am new with Flex, but I have found it to be very versatile.

       

      Many of my projects so far have been the construction of forms for various uses.

       

      I have ran into this one problem with the forms.

       

      Radiobutton's and Radiobutton groups do not have a validator. I simply want to be able to made the radiobuttongroup required before someone goes onto the next panel. But after much searching on the internet, and hours trying to find an easy way, I am not able to.

       

      Does anyone know a simple way?

       

      <mx:Script>
              <![CDATA[
                 
                  import mx.validators.StringValidator;
                  import mx.validators.Validator;
                  import mx.events.ValidationResultEvent;
                  import mx.controls.Alert;
                  import mx.validators.NumberValidator;
                  import mx.core.Container;
                 
                  private function validateInfo():void          
              {
                  var validators:Array = [serialNumberValidator, internetConnectionRadioGroupValidator];
                  var errors:Array = Validator.validateAll(validators);
                  var errorMessages:Array = [];
                 
                  if(errors.length > 0)
                  {
             
                      for each (var error:ValidationResultEvent in errors)
                      {
                          var errorField:String = Panel(error.currentTarget.source.parent).label;
                          errorMessages.push(errorField + " " + error.message);
                      }    
                     
                      Alert.show(errorMessages.join("\n\n"), "There were problems with your form.");
                   }
                   if(errors.length < 1)
                   {
                       informationAboutYouPanel.visible=false; howYouUseHomerPanel.visible=true
                   }      
                     
              }              
              ]]>
          </mx:Script>

       

      <!-- Validators -->

       

      <mx:StringValidator id="serialNumberValidator"
          source="{serialNumberTextInput}"
          property="text" 
          requiredFieldError="Please enter a serial number"
          minLength="1"/>  

       


      <mx:Validator id="internetConnectionRadioGroupValidator"
        source="{internetConnectionRadioGroup}" property="selectedValue"
        triggerEvent="change"
        requiredFieldError="One option must be selected"
        listener="{informationAboutYouPanel}"/>
         
          <!-- Information about you panel -->

        • 1. Re: Validating RadioButton Group Flex 3
          Gregory Lafrance Level 6

          If this post answers your question or helps, please mark it as such.

           

          This code should answer your question:

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.events.ValidationResultEvent;   
                import mx.controls.Alert;
                import mx.events.ItemClickEvent;
                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.");
                  } 
                }
                
                private function handleValid(eventObj:ValidationResultEvent):void {
                  if(eventObj.type==ValidationResultEvent.INVALID){    
                    mx.controls.Alert.show("You must select a radio button.");
                    americanExpress.setStyle("color", "0xFF0000");
                    masterCard.setStyle("color", "0xFF0000");
                    visa.setStyle("color", "0xFF0000");          
                  }else{
                    americanExpress.setStyle("color", "0x000000");
                    masterCard.setStyle("color", "0x000000");
                    visa.setStyle("color", "0x000000");          
                  }
                }      
              ]]>
            </mx:Script>
            <mx:Validator id="radioValidator" source="{cardtype}" 
              required="true" property="selectedValue" valid="handleValid(event)"
              invalid="handleValid(event)"/>
            <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:Button label="Send" click="radioValidator.validate()"/>
          </mx:Application>