Using a Spark Form with Validators

In this example, I’ve created a very simple registration form using Flex 4.5′s Form component. To validate the form, I am using MX StringValidator and MX EmailValidator. There are no Spark validators available for the fields I have in my form. Validation does not get triggered in this example until you click on the ‘Submit’ button.

By default, the FormItem skin puts the error message to the right of your Form Item. However, this was causing the width of my Form to double. I didn’t want the size of my Form to change significantly, so, I reskinned my FormItem to remove the “indicatorDisplay” and “errorTextDisplay”. Instead, I’ve chosen to show the validation errors for all three fields in a separate Label component that sits at the top of this Form.

In my Style block, I point to this custom FormItem skin:

<fx:Style>
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;

s|FormItem {
skinClass: ClassReference(“FormValidatorItemSkin”)
}
</fx:Style>

Sample SWF: SparkFormValidatorExample.swf
Sample Code: SparkFormValidatorExample.mxml, FormValidatorItemSkin.mxml

About these ads