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:

@namespace s “library://”;
@namespace mx “library://”;

s|FormItem {
skinClass: ClassReference(“FormValidatorItemSkin”)

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

4 responses

  1. Nice example. I was getting mad with my “fat” spark form.

  2. Zahid Chaudhry | Reply

    Is it possible to add an icon like info icon (to get more info) or question marks next to a form label?

    1. Within your tag include a help content field.

  3. hi i am not able download file each time i am getting url please send me those file to my mail id advanced thanks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: