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.
