Another quick post on validating a form using the StringValidator, NumberValidator, ZipCodeValidator and Validator classes. Not sure if this is the best method, but I used the NumberValidator to validate that a ComboBox has a valid selection (the selectedIndex property was equal to or greater than 0), and I used a combination of StringValidator and ZipCodeValidator to make sure that the user enters a US Zip+4 zip code.
Got some good Flex Validator tips? Leave em in the comments!
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/13/validating-flex-forms-using-the-validator-classes/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.validators.Validator; import mx.events.ValidationResultEvent; import mx.validators.ZipCodeValidatorDomainType; import mx.controls.Alert; [Bindable] private var validatorArr:Array; private function init():void { validatorArr = new Array(); validatorArr.push(shippingName_stringValidator); validatorArr.push(shippingAddress1_stringValidator); validatorArr.push(shippingCity_stringValidator); validatorArr.push(shippingState_numberValidator); validatorArr.push(shippingZipCode_zipCodeValidator); validatorArr.push(shippingZipCode_stringValidator); } private function validateForm(evt:MouseEvent):void { var validatorErrorArray:Array = Validator.validateAll(validatorArr);; var isValidForm:Boolean = validatorErrorArray.length == 0; if (isValidForm) { Alert.show("The form is valid!", "Valid form..."); } else { var err:ValidationResultEvent; var errorMessageArray:Array = []; for each (err in validatorErrorArray) { var errField:String = FormItem(err.currentTarget.source.parent).label errorMessageArray.push(errField + ": " + err.message); } Alert.show(errorMessageArray.join("\n\n"), "Invalid form...", Alert.OK); } } private function resetForm(evt:MouseEvent):void { shippingName.text = ""; shippingAddress1.text = ""; shippingAddress2.text = ""; shippingCity.text = ""; shippingState.selectedIndex = -1; shippingZipCode.text = ""; } ]]> </mx:Script> <mx:XMLList id="statesXMLList"> <state label="California" data="CA" /> <state label="Oregon" data="OR" /> </mx:XMLList> <mx:StringValidator id="shippingName_stringValidator" source="{shippingName}" property="text" minLength="2" /> <mx:StringValidator id="shippingAddress1_stringValidator" source="{shippingAddress1}" property="text" minLength="2" /> <mx:StringValidator id="shippingCity_stringValidator" source="{shippingCity}" property="text" minLength="2" /> <mx:NumberValidator id="shippingState_numberValidator" source="{shippingState}" lowerThanMinError="This field is required." property="selectedIndex" minValue="0" /> <mx:ZipCodeValidator id="shippingZipCode_zipCodeValidator" source="{shippingZipCode}" property="text" requiredFieldError="Please enter a zip code in ZIP+4 format." domain="{ZipCodeValidatorDomainType.US_ONLY}" /> <mx:StringValidator id="shippingZipCode_stringValidator" source="{shippingZipCode}" property="text" tooShortError="Please enter a zip code in ZIP+4 format." minLength="10" maxLength="10" /> <mx:Form> <mx:FormHeading label="Shipping Information" /> <mx:FormItem required="true" label="Name"> <mx:TextInput id="shippingName" maxChars="96" /> </mx:FormItem> <mx:FormItem required="true" label="Address"> <mx:TextInput id="shippingAddress1" maxChars="128" /> </mx:FormItem> <mx:FormItem label=""> <mx:TextInput id="shippingAddress2" maxChars="128" /> </mx:FormItem> <mx:FormItem required="true" label="City"> <mx:TextInput id="shippingCity" maxChars="128" /> </mx:FormItem> <mx:FormItem required="true" label="State"> <mx:ComboBox id="shippingState" prompt="Please select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" /> </mx:FormItem> <mx:FormItem required="true" label="ZIP Code"> <mx:TextInput id="shippingZipCode" maxChars="10" restrict="0-9 \-" /> </mx:FormItem> <mx:FormItem> <mx:HBox> <mx:Button label="Submit" click="validateForm(event)" /> <mx:Button label="Reset" click="resetForm(event)" /> </mx:HBox> </mx:FormItem> </mx:Form> </mx:Application>
View source is enabled in the following example.



{ 13 comments… read them below or add one }
Any one run across a International Zip Code Validator yet? or seen any blog on where to get all the information?
Thank you very much for your blog – I refer to it often!
Any easier way to validate a checkbox, using code built right into the Flex framework, is to use a string validator. When it attemts to validate on the checkbox, the “selected” property is automatically coerced into a string format. See the code below for an example:
Clean, simple, built-in, and best of all…. 4 lines of MXML.
Hi everyone,
I am try to put two validators on one control, but it doesn’t seem working well.
The logic is here.
I put requireValidator and emailValidator on a textBox.
when I click on “myButton” do validation.
- My expectation is:
if I don’t in put any thing we have required validator error raise
if I input some text but not match email pattern it will have emailValidator error raise
- My result:
if I don’t input any text requiredFieldValidator raise (correct)
if I input text but not follow email pattern the emailValidator raise but it doesn’t draw red rectangle around my text input and doesn’t show the validate message
Please anyone helps,
Thanks
Kethya
Here is my sample code:
====================================
1. TextInput creates dynamically
2. As mention in the creation, when we exceed the limit, it shows error my red color border, and the same time if you delete them by DEL key when it come to the given acceptable limit, automatically become to green soon.
3. Leave from the field and change values of another textinput(this is just a textinput, this is a form there are some more form elemets), then come back to value exceeded textfield by SHIFT+TABS and remove the additional entered numbers, when you come to green soon your value is accepted.
4.Now again enter more values and now you are in the warn zone, then leave from the field and do the few changes in other form elements.
5. Then come back to the value exceeded text filed by MOUSE CLICK, and start delete from DEL, even though you removed additional values, still fields shows that you are in warn zone.
Actual Results:
Even when remove additional numbers,still field is Red
Expected Results:
if remove additional numbers, field should come its normal status.
Picture of this issue can be viewed at http://bugs.adobe.com/jira/browse/SDK-24372
The index for the NumberValidator is off – it doesn’t require a selection if left at 0 that should be changed to 1
Anybody who can help me?
I want to validate the password ,which the confirm password is right for the password ?
instead of using an init function to push all validators into an array, I would do this:
Kind regards,
Marc
Why does resetting the form still leave all the inputs as invalid (i.e. red border) ? How do you reset the form completely, so someone can start from scratch?
@Jon,
Try explicitly clearing the
errorStringproperties for each control also:Peter
Hi,
when i downloaded this source and tried. it showing following error. Error #1009: Cannot access a property or method of a null object reference.
I dont know what mistake done. pls Help.Thanks in advance.
When using the control.errorString = “”; to reset the form, it appears the required field validation stops working. Neither submitting the form nor tabbing through the fields and leaving a required field blank will trigger the red-outline and tool-top functionality of the form field after setting its errorString property to “”.
@Monte Aspevig,
Not sure if it is exactly the same issue (or whether you’re using Flex 3.x or 4.x), but you may want to check out http://bugs.adobe.com/jira/browse/SDK-25731 and possibly download the latest Flex 3.6 nightly build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 and see if that solves the issue.
Peter