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

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 https://www.icloud.com/ url please send me those file to my mail id m.mohan0740@gmail.com advanced thanks

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: