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.

?View Code ACTIONSCRIPT
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>
  • Jason

    Thanks for this bit of code, helped me add the finishing touch to a project without any pain.