6 Replies Latest reply on Sep 28, 2011 11:24 AM by Bobert Marley

    Flex 4.5 - How to Validate RadioGroup?

    Bobert Marley

      I have a form that I am performing validation on. I am using String Validators to validate a TextField and RadioGroup.

       

      For some reason, the FormItem for the RadioButtons is not displaying the red error indicator.

       

      Does anyone know how to enable this?

       

       

      Capture.PNG

        • 2. Re: Flex 4.5 - How to Validate RadioGroup?
          Bobert Marley Level 1
          <?xml version="1.0" encoding="utf-8"?>
          <!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
          <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"
                                           xmlns:views="com.views.*"
                                           name="Spark_Form_Validator_test" initialize="init();">
          
          
                    <fx:Script>
                              <![CDATA[
                                        import mx.collections.ArrayCollection;
                                        import mx.controls.Alert;
                                        import mx.validators.Validator;
            
                                        //Validate the Validators Array
                                        private function validateForm():void{
                                                   var errors:Array = Validator.validateAll(validatorsArray);
                                                  if (errors.length == 0) {
                                                            //populateModel();
                                                            Alert.show('All fields are valid.'); 
                                                  }
                                                  else{
                                                            Alert.show('Please complete the required fields.','See required fields');
                                                  }
                                        }
                              ]]>
                    </fx:Script>
            
                    <fx:Declarations>
                              <!--Radio Button Group-->
                              <s:RadioButtonGroup id="group1" />
            
                              <!--Array of Validators-->
                              <fx:Array id="validatorsArray">
                                        <mx:StringValidator id="radioValidator" source="{group1}" property="selection" required="true" />
                                        <mx:StringValidator id="textValidator" source="{txtField1}" property="text" required="true" />
                              </fx:Array>
                    </fx:Declarations>
            
                    <s:Form id="form1" x="101" y="14" width="558">
                              <s:layout>
                                        <s:FormLayout/>
                              </s:layout>
            
                              <!--Radio Button's _________________________________________________________-->
                              <s:FormItem id="formItem1" width="100%" label="Validate Radio's:" required="true">
                                        <s:layout>
                                                  <s:HorizontalLayout/>
                                        </s:layout>
                                        <s:RadioButton x="157" y="195" label="Selection 1" groupName="group1" showErrorSkin="true" showErrorTip="true"/>
                                        <s:RadioButton x="157" y="221" label="Selection 2" groupName="group1"/>
                                        <s:RadioButton x="157" y="247" label="Selection 3" groupName="group1"/>
                              </s:FormItem>
            
                              <!--TextField________________________________________________________-->
                              <s:FormItem  id="formItem2" width="100%" label="Validate TextField:" required="true">
                                        <s:TextInput id="txtField1" />
                              </s:FormItem>
            
                              <!--Validate Button________________________________________________________-->
                              <s:Button id="btnValidat" x="167" y="295" label="Validate Form" click="validateForm();"/>
                    </s:Form>
            
          </s:Application>
          
          
          
          • 3. Re: Flex 4.5 - How to Validate RadioGroup?
            Amy Blankenship Level 4

            Set the Formitem that contains the radio buttons as the listener on the validator that is validating the Radio Button Group.

            1 person found this helpful
            • 4. Re: Flex 4.5 - How to Validate RadioGroup?
              Bobert Marley Level 1

              Here is what I did. It doesn't seem to be working, although I could be doing it wrong?

               

              <mx:StringValidator id="radioValidator" source="{group1}" property="selection"
                                            required="true" listener="{formItem1}"  />
              
              • 5. Re: Flex 4.5 - How to Validate RadioGroup?
                Amy Blankenship Level 4

                You could try listening for the validation event and manually setting the error string on the FormItem, but I think that's the long way round of what listener does.  You could also try putting the radio buttons in a SkinnableContainer and setting the error string on that (I think you'll have to make a custom skin to show the error indicator in that case, but I'm not 100% sure.

                • 6. Re: Flex 4.5 - How to Validate RadioGroup?
                  Bobert Marley Level 1

                  @Amy,

                   

                  I found a solution! I ended up putting my RadioButtons inside of a HGroup and I set the HGroup as the listener for the validator. See the screenshot below. I really appreciate you help Amy!

                   

                  I added the code below if anyone needs it for reference. I also threw in a DropDownList validator.

                   

                  Capture.PNG

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <!-- http://blog.flexexamples.com/2010/08/30/displaying-the-error-indicator-on-a-spark-formitem-container-in-flex-hero/ -->
                  <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"
                                                   xmlns:views="com.views.*"
                                                   name="Spark_Form_Validator_test" initialize="init();">
                  
                            <fx:Script>
                                      <![CDATA[
                                                import mx.collections.ArrayCollection;
                                                import mx.controls.Alert;
                                                import mx.validators.Validator;
                  
                                                [Binadble] 
                                                private var myDP:ArrayCollection = new ArrayCollection();
                                                [Bindable]
                                                private var errors:Array;
                  
                                                //Application Initilization
                                                private function init():void{
                                                          var newItem:Object = new Object();
                                                          newItem.data = 0;
                                                          newItem.label = "Hello World";
                                                          myDP.addItem(newItem);
                                                }
                  
                                                //Validate the Validators Array
                                                private function validateForm():void{
                                                          errors = new Array();
                                                          errors = Validator.validateAll(validatorsArray);
                                                          if (errors.length == 0){
                                                                    Alert.show('All fields are valid.'); 
                                                          }
                                                          else{
                                                                    Alert.show('Please complete the required fields.','See required fields');
                                                          }
                                                }
                                      ]]>
                            </fx:Script>
                  
                            <fx:Declarations> 
                                      <!--Array of Validators-->
                                      <fx:Array id="validatorsArray">
                                                <mx:StringValidator id="radioValidator" source="{group1}" property="selection" required="true" listener="{myGroup}"  />
                                                <mx:StringValidator id="textValidator" source="{txtField1}" property="text" required="true" />
                                                <s:NumberValidator id="comboValidator" source="{dropdown1}" property="selectedIndex" required="true" minValue="0" 
                                                                                           lessThanMinError="Please select an item"/>
                                      </fx:Array>
                  
                                      <!--Radio Button Group-->
                                      <s:RadioButtonGroup id="group1" />
                            </fx:Declarations>
                  
                            <s:Form id="form1" x="101" y="14" width="558">
                                      <s:layout>
                                                <s:FormLayout/>
                                      </s:layout>
                  
                                      <!--Radio Button's _________________________________________________________-->
                                      <s:FormItem id="formItem1" width="100%" label="Validate Radio's:" required="true">
                                                <s:layout>
                                                          <s:HorizontalLayout/>
                                                </s:layout>
                  
                                                <s:HGroup id="myGroup">
                                                          <s:RadioButton id="r1" x="157" y="195" label="Selection 1" groupName="group1"/>
                                                          <s:RadioButton id="r2" x="157" y="221" label="Selection 2" groupName="group1"/>
                                                          <s:RadioButton id="r3" x="157" y="247" label="Selection 3" groupName="group1"/>
                                                </s:HGroup>
                                      </s:FormItem>
                  
                                      <!--TextField________________________________________________________-->
                                      <s:FormItem  id="formItem2" width="100%" label="Validate TextField:" required="true">
                                                <s:TextInput id="txtField1" />
                                      </s:FormItem>
                  
                                      <!--DropDownList________________________________________________________-->
                                      <s:FormItem id="formItem3" width="100%" label="Validate Combo:" required="true">
                                                <s:DropDownList id="dropdown1" width="155" labelField="label" prompt="---Choose One---">
                                                          <s:dataProvider>
                                                                    <s:ArrayCollection source="myDP"/> 
                                                          </s:dataProvider>
                                                </s:DropDownList>
                                      </s:FormItem>
                  
                                      <!--Validate Button________________________________________________________-->
                                      <s:Button id="btnValidat" x="167" y="295" label="Validate Form" click="validateForm();"/>
                            </s:Form>
                  
                  </s:Application>