Rank: Newbie Groups: Member
Joined: 11/5/2008 Posts: 1 Points: 3 Location: Charlotte
|
I asked Shawn the following question and he requested I post an example here for him to look at. Thanks for any assistance. Question: I am trying to use the validation of field A to also make field B enabled, editable, and if feasible, required. (Previously field B would be non-editable and not enabled) I would like for the validation on field A to trigger whether the user tabs out of the field or presses the enter key after entering a value in field A.
My code - I started with some code that I had done while trying to do the on line "Flex in a week" tutorial, and added some fields as I was testing various things. The two fields that I am using for the issue in the question are the 'fullname' and 'address' fields. I have set the 'address' field to editable="false" enabled="false" and want the successful validation of the 'fullname' field to make the 'address' field enabled/editable for input and navigate to it.
Code: <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="solid" borderColor="#D4D4D4" dropShadowEnabled="true" dropShadowColor="#B3B3B3" shadowDirection="right" shadowDistance="10" creationComplete="init()" height="630" width="696"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.CollectionEvent; import mx.events.FlexEvent; import mx.events.ItemClickEvent; import mx.events.ValidationResultEvent; import mx.validators.Validator; [Bindable] public var selectedOptions:ArrayCollection; [Bindable] public var formIsValid:Boolean = false; [Bindable] public var formIsEmpty:Boolean = true; // Holds a reference to the currently focussed control on the form. private var focussedFormControl:DisplayObject;
private var myValidators:Array = new Array(); private function init():void{ selectedOptions.addEventListener(CollectionEvent.COLLECTION_CHANGE, addToList); myValidators = [fullnameV, addressV, cityV, stateV, postalcodeV, phoneV, dateNeededV]; } private function addToList(event:CollectionEvent):void{ thelist.dataProvider = selectedOptions; } private function validateForm():void{ var vals:Array = new Array(); vals = Validator.validateAll(myValidators); } //enter="nextField(address)" private function nextField(formObject:Object):void { var ti:TextInput = formObject as TextInput; ti.setFocus(); } //change="toggleEditControl(address)" private function toggleEditControl(formObject:Object):void { var ti:TextInput = formObject as TextInput; ti.enabled = !ti.enabled; ti.editable = !ti.editable; ti.setFocus(); }
// Event handler function to display the selected button in an Alert control. private function handleCard(event:ItemClickEvent):void { if (event.currentTarget.selectedValue == "F") { Alert.show("You selected Female") } else { if (event.currentTarget.selectedValue == "M") { Alert.show("You selected Male") } } } ]]> </mx:Script> <mx:StringValidator id="fullnameV" source="{fullname}" property="text" valid="{toggleEditControl(address)}" /> <mx:StringValidator id="addressV" source="{address}" property="text" trigger="{button}"/> <mx:StringValidator id="cityV" source="{city}" property="text" trigger="{button}"/> <mx:StringValidator id="stateV" source="{state}" property="text" trigger="{button}"/> <mx:StringValidator id="postalcodeV" source="{postalcode}" property="text" trigger="{button}"/> <mx:NumberValidator id="numeditV" source="{numericEdit}" property="text" allowNegative="false" domain="real" required="false" valid="{focusManager.setFocus(memoedit)};" invalid="Alert.show('Numbers, commas, and a decimal are the only valid characters');" />
<mx:PhoneNumberValidator id="phoneV" source="{phone}" property="text" allowedFormatChars="-" trigger="{button}" /> <mx:DateValidator id="dateNeededV" source="{dateNeeded}" property="text" allowedFormatChars="/" trigger="{button}" />
<mx:FormHeading label="Contact Information" x="100" y="4"/>
<mx:FormItem label="Full Name" required="true" x="15" y="27" height="22" width="260" horizontalAlign="right" indicatorGap="50"> <mx:TextInput id="fullname" /> </mx:FormItem>
<mx:FormItem label="Address:" required="true" x="15" y="51" height="22" width="260" horizontalAlign="right" indicatorGap="60" > <mx:TextInput id="address" editable="false" enabled="false" /> </mx:FormItem>
<mx:FormItem label="City:" required="true" x="15" y="75" height="22" width="260" horizontalAlign="right" indicatorGap="105"> <mx:TextInput id="city"/> </mx:FormItem>
<mx:FormItem label="State:" required="true" x="15" y="99" height="22" width="260" horizontalAlign="right" indicatorGap="90"> <mx:TextInput id="state" /> </mx:FormItem>
<mx:FormItem label="Postal Code:" required="true" x="15" y="123" height="22" width="260" horizontalAlign="right"> <mx:TextInput id="postalcode" height="27"/> </mx:FormItem>
<mx:FormItem label="Phone:" required="true" x="15" y="147" height="22" width="260" horizontalAlign="right" indicatorGap="78"> <mx:TextInput id="phone" /> </mx:FormItem>
<mx:FormHeading label="Room Information" x="60" y="173"/> <mx:FormItem label="Date Needed:" required="true" height="22" width="196" y="196" x="15"> <mx:DateField id="dateNeeded" selectableRange="{{rangeStart : new Date()}}"/> </mx:FormItem>
<mx:FormHeading label="Selected Options" x="60" y="223"/> <mx:FormItem label="Selected Options:" y="245" height="209" x="0" width="299"> <mx:List id="thelist" width="182" height="207" fontSize="9" borderStyle="none" backgroundAlpha="0" leading="0" /> </mx:FormItem>
<mx:Button id="button" label="Submit" click="validateForm()" y="459" x="124"/> <mx:FormItem label="Gender" height="60" horizontalAlign="left" width="129" x="386" y="3"> <mx:RadioButtonGroup id="Gender" labelPlacement="right" itemClick="handleCard(event);" /> <mx:RadioButton groupName="Gender" id="Female" label="Female" value="F" /> <mx:RadioButton groupName="Gender" id="Male" label="Male" value="M" /> </mx:FormItem>
<mx:FormItem label="Memo" x="22" y="494"> <mx:TextArea id="memoedit" verticalScrollPolicy="auto" x="107" y="399"/> </mx:FormItem> <mx:FormItem label="Number Edit" x="299" y="70"> <mx:TextInput x="386" y="99" id="numericEdit" /> </mx:FormItem> </mx:Canvas>
|
Rank: Administration Groups: Administration
Joined: 8/8/2008 Posts: 39 Points: 32
|
Check this out regarding validation and data manipulation: http://www.adobe.com/devnet/flex/quickstart/validating_data/#section2I will post more on this later this afternoon.
|