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?
@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.
<?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>
