Easy form validation for Flash
As a professional Flash and Flex developer, I wrote lots of handy utilities that I use on a daily basis when developing Flash websites or Flex applications. I developed my own library containing base classes and utilities that allow me to setup Flash website projects in no time. I call it the “viplib”.
I plan to releasing some of that code. And here’s a first code snippit:
In Flex, it’s easy to do form validation using the various validator components. But for Flash, one has to write his own code. Here’s a simple form-validation class that not only checks empty fields and invalid email entries, but also highlights those fields when their content is invalid. Using this class you can validate a form and highlight the fields that are invalid with only 1 line of code.
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | //copyright Ward De Langhe //Very Interactive People package be.viplib.util { import flash.display.Sprite; import flash.events.FocusEvent; import flash.text.TextField; public class FormValidator { private var _target:Sprite; private var _requiredFields:Array; private var _emailFields:Array; private var _normalColor:Number; private var _invalidColor:Number; private var _requiredMessage:String; private var _invalidEmailMessage:String; public function FormValidator(target:Sprite,requiredFields:Array, emailFields:Array,normalColor:Number=0x000000,invalidColor:Number=0xff0000,requiredFieldMessage:String="required field",invalidEmailMessage:String="invalid email") { _target=target; _requiredFields=requiredFields; _emailFields=emailFields; _normalColor=normalColor; _invalidColor=invalidColor; _requiredMessage=requiredFieldMessage; _invalidEmailMessage=invalidEmailMessage; } public function set invalidMailMessage(value:String):void{ _invalidEmailMessage=value; for(var i:Number=0;i<_emailFields.length;i++){ var field:TextField=_target.getChildByName(_emailFields[i]) as TextField; if(field.text==_invalidEmailMessage){ field.text=value; } } } public function set requiredMessage(value:String):void{ _requiredMessage=value; for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.text==_requiredMessage){ field.text=value; } } } public function validate():Boolean{ var valid:Boolean=true; for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.text=="" || field.text== _requiredMessage || field.text==_invalidEmailMessage || (field.text.length==1 && field.text.charCodeAt(0)==13)){ field.textColor=_invalidColor; field.text=_requiredMessage; field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); valid=false; } } for(i=0;i<_emailFields.length;i++){ field=_target.getChildByName(_emailFields[i]) as TextField; if(field.textColor!=_invalidColor){ if(!MailValidator.validateEmail(field.text)){ field.textColor=_invalidColor; field.text=_invalidEmailMessage; field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); valid=false; } } } return valid; } private function fieldFocus_handler(evt:FocusEvent):void{ for(var i:Number=0;i<_requiredFields.length;i++){ var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField; if(field.textColor==_invalidColor){ field.textColor=_normalColor; field.text=""; field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); } } for(i=0;i<_emailFields.length;i++){ field=_target.getChildByName(_emailFields[i]) as TextField; if(field.textColor==_invalidColor){ field.textColor=_normalColor; field.text=""; field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler); } } } } } |
This class uses my mailvalidator utility to validate the email adresses. It’s a simple utility which checks if a e-mailaddress is valid using a regular expression.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //copyright Ward De Langhe //Very Interactive People package be.viplib.util { public class MailValidator { public static function validateEmail(str:String):Boolean { var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/; var result:Object = pattern.exec(str); if(result == null) { return false; } return true; } } } |
You can download example source code here. It’s a simple form containing a couple of required fields, and an email field. Here’s how this sample looks when compiled:
Click the “validate” button to see the validation class do it’s job.
Thank you! This will be very useful. Hope you release some more gems soon.
Hi Ward … the code is well written and very useful, but I’d strongly recommend not using AS3 reserved words and methods such as ‘validate’ and ‘valid’.
Thanks for sharing your work.
Thanks, but “valid” or “validate” are not reserved. So I don’t see what the problem is with my code.
Are you using the Flash IDE or Flex builder to compile your code? Do you get warnings or errors?