Validatoring Forms in Flex 2

Posted on August 23, 2006 | 15 comments

Validating forms are not my favorite thing to do in Flex 2. A lot of the process seems quite tedious. It is a big improvement over Flex 1.5, but typically you have to create the validators and then create a function to see if all the validators are valid/invalid.

It seems the simple approach to validation would be to have the Form be aware of the Validators and provide and easy Bindable way of providing the state of validity for the Form.

Typical Approach (One Validator):

  1. Create Form
  2. Create Validator
  3. Add valid/invalid event listeners
  4. Create valid/invalid method handler that sets the button.enabled property

Typical Approach (More than One Validator):

  1. Create Form
  2. Create Validator
  3. Add Bindable isValid flag
  4. Add different valid/invalid event listeners for each Validator or pass a identifier along in the generic function.
  5. Create different valid/invalid method handler and set a Bindable isValid flag variable. Or create a generic function with a lot of switch cases to set the event’s proper valid and then check if all flags are valid.
  6. Bind isValid flag to Submit button’s enabled property

Simple Approach:

  1. Create Form
  2. Create Validators
  3. Bind Form.isValid property to Submit button’s enabled property

This is exactly what the AdvancedForm component provides. You still have full control of the Validators, but it provides a simple approach to constraining Form submission.

You’ll find the AdvancedForm component on the Adobe Flex Exchange or under the components folder on my site.

  • Stephen Gilson

    You may be the first person to doc a component using the public version of ASDoc. How did it go? Where there any issues that you cam across?

    Stephen

  • http://www.deitte.com Brian

    I don’t know much about validation, but I’m excited to see ASDoc used in the wild for the first time!

  • http://www.renaun.com Renaun Erickson

    Actually the AdvancedForm documentation was created by Teoti Graphix :: DocumentFX.

    My Flex 2 / FMS ConnectionMonitor component documentation was done with ASDoc. You can find that documentation at http://renaun.com/flex2/fms/ConnectionMonitor/docs/

    The ASDoc command lind parameters where a bit tricky. I even tried to mess with the templates folder to get rid of the ABC…Z index files (as it was to much for just 3 classes), but ended up just manually changing the files.

  • http://www.deitte.com Brian

    Ah, the footer on the bottom of AdvancedForm should have told me that. Well they both look very nice.

    If you have any specifics on what was tricky with the command-line parameters, I’d be interested to hear at bdeitte at (adobe dot com)

  • http://www.flex2components.com Michale Schmalle

    Brian,

    Heh, thanks, it should look like Asdoc.

    I had this working 2 months ago :).

    By the way, no competition or anthing but, DocumentFX has a Flex UI and is completly generated by Flex2 AS3.

    The ironny is, I am trying to make it as fast as ASDoc. Comming close. Plus DocumentFX has a whole project interface and well, everything is customizable.

    I guess the only thing it dosn’t do that ASDoc does is XLST wihich I can’t stand by the way. It does produce XML class representations though.

    It uses a builder pattern for a template right now. The parser is a polymorphic plugin.

    Anyway, it’s nice that Adobe got out their documenter, for now DocumentFX is my tool that I like adding goodies to. ;-)

    Peace, Mike

    PS It was made for my own component development.

  • http://www.cflex.net Tariq Ahmed

    Wow, Renaun you’re a productivity sharing machine!! :)

    I added links to your latest set of components on CFLEX.

  • http://www.renaun.com Renaun Erickson

    Thanks Tariq,

    any suggestions on the components or comments on the usage of the components are welcome

  • Flex Newb

    Thanks for the component. I have no clue how to install/use it. Can you help?

    Thanks

  • http://www.renaun.com Renaun Erickson

    Quick instructions:
    Download and Extract source zip file.
    In a your Flex Builder, navigate to the Flex Project you want to use it in.
    Then click on Project -> Properties -> Flex Build Path
    Then click on the Library Path tab on the right
    Then click on the “Add SWC…” button on the right, browse to where you extracted the zip file.
    You’ll find the SWC file under /renaun_com_AdvancedForm/bin/, browse to this file and hit OK.

    Thats it, now you can use the component.

    The other way would be to copy the /renaun_com_AdvancedForm/src/ files into your Project as is.

    Hope that helps,

  • Flex Newb

    Thanks, you just saved me a lot of time.

    Cheers!

  • http://www.leg.state.nv.us Lance

    I’m using your component with on a few different forms in an app. This error comes up when I transition from one state to another (containing a separate form). Any Ideas.

    Error: Snapshot not defined
    at com.renaun.containers::AdvancedForm/::textInputChange()
    at flash.display::Stage/set focus()
    at mx.core::UIComponent/setFocus()
    at mx.managers::FocusManager/setFocus()
    at mx.managers::FocusManager/::mouseDownHandler()

  • http://www.renaun.com Renaun Erickson

    I will look into it. Its a error I throw when the snapshot does not find a valid value for the specific item that triggered a FOCUS_OUT event, which is set for TextInput’s and TextAreas.

  • Dustin

    Renaun,
    Thanks a bunch for contributing this component to the community!

    I have one problem. If I’m using multiple validators in a form and I reset the form, the form then only requires one of the validators to be completed on the next time completing it. The rest don’t seem to matter. Here’s some code and directions to reproduce what I’m talking about.

    The code:

    To reproduce the problem:
    1. fill out the form.
    2. clear the fields.
    3. fill out any one field
    4. click to fill out another field and the submit button becomes enabled.

    Thanks for any help with this.

  • http://blog.criticalPile.com Scott

    Wasn’t able to submit, when non-required validators weren’t filled out, so I modified the following to AdvancedForm.setValidatorListenerEvents() in your ‘for each’ loop:

    if( container[ a.@name ] is Validator && container[ a.@name ].required ) {…}

    Sorry if there’s a better place, but it’s working…

    Thanks so much.. working great!

    -Scott

  • Ray Solomon

    What would I have to do to add hours and minutes combo boxes under the date picker?
    Goal is to allow clients to pick date and time of day and result in this format.
    YYYY-MM-DD HH:MM:SS

    Suggestions anyone?