What's the best way to validate a complex Flex form?

Question

I have a Flex application that edits a moderately complex object, and I'd like to put some client-side validation in place on multiple parts of the editor. The editor is a set of nested objects:

Form ->
    TabNavigator ->
        Tab1 ->
            Component1.1
            Component1.2
        Tab2 ->
            Component2.1
            Component2.2
    &c
    SubmitButton

The structure echoes the data model fairly closely, and the UI is what the project requires, so I'm not going to be too quick to restructure the classes there if I don't have to -- time is an issue too. What I want to do is have validators for each of the Component* instances that:

• Show the validation tool tips and UI hints on the relevant UI element
• Disable the SubmitButton when any part of the form is not valid
• (Optionally) provide enough information that I can display an error message in the form.

What's the best way to go about this?

Answer 1

I presume you have checked mx.validators.Validator class and it's various subclasses like

• CreditCardValidator
• CurrencyValidator
• DateValidator
• EmailValidator
• NumberValidator
• PhoneNumberValidator
• RegExpValidator
• SocialSecurityValidator
• StringValidator
• ZipCodeValidator

Answer 2

When the form is created, create an array to hold references to all the validators of the components in your form. Then when user submits the form, check that all the inputs pass your criterion.

if ((Validator.validateAll(validatorArr) as Array).length != 0){
  Alert.show("There are errors on the form.  Please correct before saving.", "Form Errors");}
else { /* do something*/}

Answer 3

After dealing with this kind of use case far too many times, I finally decided to write my own subclass of Form that offers validation of all elements as a built-in behavior.

The idea evolved a long way from there, but if you're curious, check out the open source project I published on bitbucket at

http://bitbucket.org/rpathsync/smartform

SmartForms (and SmartFormItems) handle form creation and validation, etc. using an XML "Descriptor". The main reason for this was to allow for server-generated forms since we often deal with objects that the client has no a-priori knowledge of (our server is pluggable hence the need for server provided form descriptors)

There's way more code there than you probably want, but the validation related classes in that repository might be interesting to you.