Archive for January, 2009
Easily Validating Dynamic Forms (or with just ‘too many’ fields)
Don’t you hate having to specify validation on each individual control in your form? Or how about when project management is continually adding new form fields to a form? “A user should have to retype an email address” or, “we need to add a billing address section.” Well now rather than having to add a new validator source or explictly call validate() for the new control, this code takes care of it all automatically. This works especially great for forms with dynamic fields.
Just add the FormItem to your form, set it to required and you’re set! Simply call
passing in any Form object and it will create an array of all the fields inside of the form. Since mostly you’ll be dealing with TextInput controls in your FormItem, that’s what this example uses. See comments in example code for more detailed information on usage.
Click to view demo app (Right click to View Source)
Sample code:
…
* Helper function that returns all the fields for a
* given form. Pass in requiredOnly = true if you only want
* the required fields.
*/
private function getFields(form:Form, requiredOnly:Boolean=false):Array
{
var a:Array = [];
// get every child of the Form
var formItems:Array = form.getChildren();
for (var i:int=0; i<formItems.length; i++)
{
// make sure it's a FormItem - if you use FormHeading or have
// items that are not wrapped in a FormItem tag then ignore those
if (formItems[i] is FormItem)
{
var formItem:FormItem = formItems[i];
// add the formItem's child to the array.
// if you only need required items, set requiredOnly = true
// Note: this assumes you only have one form field per FormItem
// You could easily add additional logic here for more
if (formItem.required || !requiredOnly)
a.push(formItem.getChildAt(0));
}
}
return a;
}
/**
* Validates all fields in a given form.
*/
private function validateForm(form:Form):Boolean
{
// reset the flag
var _isValid:Boolean = true;
// populate the fields - if your fields aren't dynamic put this in creationComplete
var fields:Array = getFields(form, true);
for each(var source:UIComponent in fields)
{
// create a simple string validator
var validator:StringValidator = new StringValidator();
validator.minLength = 2;
validator.source = source;
validator.property = "text";
var result:ValidationResultEvent;
// typical validation, but check to this checks for any different
// types of UIComponent here
if (source is TextInput)
result = validator.validate(TextInput(source).text)
else if (source is TextArea)
result = validator.validate(TextArea(source).text)
// if the source is valid, then mark the form as valid
_isValid = (result.type == ValidationResultEvent.VALID) && _isValid;
}
return _isValid;
}
…
4 comments