I like laying out forms in MXML because it’s easy to read. In a recent project, I had five email fields and it looked something like this:
<mx:Form id="myForm"> <mx:FormItem label="1." labelStyleName="tenEmailsLabel"> <mx:TextInput id="email1" width="300" fontSize="13" /> </mx:FormItem> <mx:FormItem label="2." labelStyleName="tenEmailsLabel"> <mx:TextInput id="email2" width="300" fontSize="13" /> </mx:FormItem> <mx:FormItem label="3." labelStyleName="tenEmailsLabel"> <mx:TextInput id="email3" width="300" fontSize="13" /> </mx:FormItem> <mx:FormItem label="4." labelStyleName="tenEmailsLabel"> <mx:TextInput id="email4" width="300" fontSize="13" /> </mx:FormItem> <mx:FormItem label="5." labelStyleName="tenEmailsLabel"> <mx:TextInput id="email5" width="300" fontSize="13" /> </mx:FormItem> </mx:Form>
I obviously wanted to use one validator for all of the email addresses since they all need to be validated the same way. I couldn’t find any great examples on the internet so I am posting the code to validate multiple fields with one validator.
private function submitForm():void{ var result:ValidationResultEvent; var isValid:Boolean = false; for(var i:int=1; i<myForm.getChildren().length; i++){ tenEmailsValidator.source = this["email"+i]; result = tenEmailsValidator.validate(); isValid = isValid && ( result.type == ValidationResultEvent.VALID )? true : false; } if(isValid){ //...submit the form }else{ Alert.show("You cannot submit the form with errors."); } }
If anyone has a better way to do this, please share!
No TweetBacks yet. (Be the first to Tweet this post)
If you enjoyed this post, make sure you subscribe to my RSS feed!
7 Comments
one possible solution, and it probably isn’t the fastest but would work dynamically, is to give your outer form an id. then iterate through its children and check if they are form items. then get the form item’s child and validate on that.
now if you knew the structure of the form would alwyas have a form item with 1 child and that child is a text input that is an email then you can just use bracket notation to access it
that might only be worth coding if you are frequently doing this and need just 1 function do it.
honestly, i’d just declare the 5 validators in an array and then just validate on the array.
your code should also change the loop max of 6 to the form.getchildren().length so it works with any number of emails. or even better, why not just create this form item in actionscript?
in 1 loop you can add the children to the form and create the appropriate validators and put them in an array setting up easy validation
I think it really depends on your application and your preference. Personally, I like looking at MXML for a layout such as a simple form. If my labels for each email become “Personal Email”, “Work Email”, “School Email”, etc. then I would have to put logic inside the “input creating” loop to put proper input labels where they belong. However, with the specific example I gave, I think your point is valid because the labels and id’s increment and everything else is the same.
Iterating through the form’s children can be problematic if other types of text fields exist. In the actual application, I might have a “First Name” text field which I would not want to validate with the email validator.
I don’t really see the point in creating 5 validators. They will all be exactly the same.
I think form.getchildren().length is a good idea in case I decide to add or remove an input. I updated my code and the post to use it. Thanks for the comments.
you’re going to have tradeoffs with every solution. it all depends on what you want i guess. some are more dynamic, others are more readible
also your flex examples need more bit shifting
What about other component validations like ComboBox, RadioButtonGroup and CheckBoxGroup?
How to validate all these in submitForm() method ??
Look how this guy validates a state – http://blog.flexexamples.com/2007/08/13/validating-flex-forms-using-the-validator-classes/