Carlo Alducente's Blog

I’ve never been a big fan of creating forms in flash, like many others I would rather build an html form and let the backend guys deal with all the validating. But sometime it’s just unavoidable, specially when your entire site is in flash, popping open an html form is kinda dinky and not very good for consistency.

Here’s a couple things that I found made my life easier when creating forms in flash.

Email Validation
Here’s a good function that I snatched from a senocular forum thread. Using AS3 regular expressions, it returns true if an email is valid and false if it’s not:

function isValidEmail(email:String):Boolean {
	var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;
	return emailExpression.test(email);
}

All you have to do is pass the email in the parameter like so:

trace(isValidEmail("carlo@alducente.com")) //traces "true"
trace(isValidEmail("woot!")) //traces "false"

Checking For Empty Fields
This isn’t a big issue but found that it’s good to keep reminding myself that if text in a field is ==”" or == null, it doesn’t necessarily mean that it’s not empty.

Previously, in order to check for empty fields, i would always just check if the string is empty or equal to null, like so:

if([string] == "" || [string] == null){
	//[string] is empty, throw a big fat bolded error.
}

I did this for quite a while until i realized that people can still put in spaces only and it will bypass my validation because technically, the string is not empty. It’s got one (or more) spaces in it only. So here’s a quick function that I hacked together:

function isNotEmpty(info:String):Boolean{
	var noSpaces:Array = info.split(" ");
	var a:uint;
	for (a = 0; a < noSpaces.length;a++ ){
		if (noSpaces[a] != ""){
			return true;
		}
	}
	return false;
}

Using the split() method of a string, i seperate the string into an array wherever there is a space. So if I call the function on “Carlo is blogging”, i get an array back that looks like this: ["Carlo", "is", "blogging"]. I can then loop through the array and check if there are any empty (“”) values in the array. If the Array is full of empty values, then the string is empty (return false), but if it finds at least one real value, return true.

And the best for last: TABBING!! AAAHHHHH!!!!
I’m probably the worst at remembering the tabbing order of my forms in flash. Just when you think you’re done with a form, the QA guy hits the “TAB” button and BLAM! You’re selection goes from the “First Name” field to some random movieclip and puts you to shame with a thick ugly yellow border around that movieclip.

There are two ways you can specify the tabbing order. You can do it by selecting the object you want to add tabbing on to, and going to Window>Other Panels>Accessibility. A window will popup with a “Tab index” field. There you can put in a number depending on the order of the tabbing. So if you want to make a text field the first one in the tabbing order, you just put 1 in that field.

You can also specify tabbing order through code, in AS3 objects have a “tabIndex” property, you can do the same thing above and give it a numerical value.

The one “gotcha” I always encounter is having random movieclips be part of the tabbing, highlighting it with a yellow border. The simplest solution to this is disabling the tabbing for that movieclip by using the “tabEnabled” property.

myMovieClip.tabEnabled = false; //keeps it out of the tab order.

Any buttons on stage will automatically get added to the tabbing order, even if it’s originally a movieclip and you set its “buttonMode” property to true, that’s how I usually get that yellow border.