Flex Custom Validator Email Confirmation
Pretty simple stuff. This was driving me a bit crazy at the beginning of the day so I decided to just cut and paste my source code hoping this will help someone else out. Basically I just want to create a custom validator that makes sure one field is equal to another in flex. Pretty simple but if you are a noob you will find this task a bit sucky…. Her is the code
Actionscript Custom Validator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | package com.flextradeshow.classes { import flash.text.TextField; import mx.controls.TextInput; import mx.validators.ValidationResult; import mx.validators.Validator; public class EqualValidator extends Validator { private var results:Array; [Bindable] public var textbox:TextInput = new TextInput(); public function EqualValidator() { super(); } override protected function doValidation(value:Object):Array { results = []; results = super.doValidation(value); if(results.length > 0) { return results; } if(value!=textbox.text || !value) { results.push(new ValidationResult(true,null,"NaN","Not a matching value sorry")); return results; } return results; } } } |
This is the code you need in your view to use the validator.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?xml version="1.0" encoding="utf-8"> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tsclasses="com.flextradeshow.classes.*" > <mx:StringValidator id="nameValidator" source="{_iname}" property="text" minLength="4" /> <mx:EmailValidator id="emailValidator" source="{_iemail}" property="text" /> <mx:EmailValidator id="emailConfirmationValidator" source="{_iconfirmemail}" property="text" /> <tsclasses:EqualValidator id="sameEmailValidator" source="{_iconfirmemail}" textbox="{_iemail}" property="text" /> <mx:Form labelWidth="100" width="302" height="100%" horizontalScrollPolicy="off"> <mx:FormItem label="Full Name" required="true"> <mx:TextInput id="_iname"/> </mx:FormItem> <mx:FormItem label="Email" required="true"> <mx:TextInput id="_iemail"/> </mx:FormItem> <mx:FormItem label="Confirm Email" required="true"> <mx:TextInput id="_iconfirmemail" /> </mx:FormItem> <mx:FormItem label="Birthday"> <mx:DateField id="_ibirthday" /> </mx:FormItem> <mx:Spacer height="15"/> <mx:Label text="Free mimoDesk Sample (Choose One)"></mx:Label> <mx:Box paddingLeft="110"> <mx:RadioButtonGroup id="freemimodesk"/> <mx:RadioButton label="Star Wars" groupName="freemimodesk" selected="true"/> <mx:RadioButton label="Tokidoki" groupName="freemimodesk"/> <mx:RadioButton label="Original Core Series" groupName="freemimodesk"/> <mx:RadioButton label="Not Interested" groupName="freemimodesk"/> </mx:Box> <mx:Spacer height="15"/> <mx:Label text="Subscribe to any of the following Newsletters"></mx:Label> <mx:Box paddingLeft="110"> <mx:CheckBox label="Consumer" selected="true"/> <mx:CheckBox label="Press"/> <mx:CheckBox label="Wholesale"/> </mx:Box> <mx:Box horizontalAlign="right" width="100%"> <mx:Button label="Subscribe"/> </mx:Box> </mx:Form> </mx:Panel> |
