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.
Very nice validation example. You may want to change this line:
to
Using “\n” will cause each error to display on its own line.
Thanks Bruce,
Apparently I needed to put two backslashes for it to show up in the entry above. *shrug*
Nice Example. Perfect for what I needed.
If someone has a better way, I would love to know what it is.
Peter,
I have a suggestion for this one that may help out in the case you are using a credit card validator. The parent is stored in a different place. You can also check out my formatting.
Regards,
Tony
AWESOME….
Is there a way to display the textInput Name Error message?
I changed the code, but doesn’t work for me.
from:
to:
CHEERS & THANKS
Nice,
Not sure if you’re using the example from above or a modified version (I’ll assume its the code from above), but I can get the control’s “id” by using the following snippet from the
validateForm()
method:You should take out the “parent” from the path since I was jumping up to the FormItem control to grab the
label
property.Hope that helps,
Peter
Peterd, you are so cool.. Now I can get the id :)
I was wondering how to verify check box in the form, most form contents check box! -_- Base on the example above, how to add a check box and return all errors in Alert.show box? any suggestion?
have a nice day
valentineday,
Not strictly related to the previous example, but here is one way to use a validator to see if a check box is selected. Note that I’m validating against a <mx:Model /> here, and I’m converting the data type from a Boolean to a Number. I’m sure there are other/better ways, but I threw this together somewhat quickly.
Hope that helps,
Peter
I think thats to extra its easier to just write BooleanValidator here I did it quick and dirty way stripped down code from StringValidator.:
I think you are doing way too much extra just to get checkbox validate.
after that you can just do :
levan,
Great tip, thanks!
Peter
Does anyone know how to use the source and property fields to do a credit card validation in actionscript? I know that I can use the cardTypeSource and property and the cardNumberSource and property to do it, but I’m trying to make it more generic, and, according to the livedocs, it is possible by passing an object. However, I’ve tried just about every variation I can think of, but none of them work.
This is the part that’s confusing me
Use the source and property properties to specify a single Object. The Object should contain the following fields:
cardType – Specifies the type of credit card being validated.
In MXML, use the values: “American Express”, “Diners Club”, “Discover”, “MasterCard”, or “Visa”.
In ActionScript, use the static constants CreditCardValidatorCardType.MASTER_CARD, CreditCardValidatorCardType.VISA, or CreditCardValidatorCardType.AMERICAN_EXPRESS CreditCardValidatorCardType.DISCOVER, or CreditCardValidatorCardType.DINERS_CLUB.
cardNumber – Specifies the number of the card being validated.
I’ve done ccObj:object = { cardNumber: myCardNumField, cardType: myCardTypeField }
for the source, but then I don’t know what string to use for the property (as property appears that it has to be a string).
Anyone have any ideas?
Gareth,
I just whipped this up (“Creating a credit card validator in ActionScript”), although now re-reading your question I’m not sure if I answered the right thing.
Was that roughly what you were looking for? Or were you looking for something more specific to the object syntax?
Peter
Hey Peter,
finally got around to this post again. Thanks for the post. That definitely makes it easier to understand. I guess what confused me previously was that the object would be the source and the properties for each would be the the actual properties of the object. I’m not sure what it was I was trying, but whatever I was doing was not working. This will definitely help.
Thanks.
Sorry, but this is not a good example. Way too much boilerplate code and no reusability. It’s also missing some of the instant error feedback (indicate after each keystroke whether your form input is valid or invalid – come on, javascript forms can do this…) or even basic expected functionality such as having the enter key “revalidate” the input component or something.
What if you have 10 forms with 5-20 fields each? Are we supposed to copy and paste all that stuff for every field, every form? It’s not easily pulled out into a custom component.
Nice for simple cases but serious apps will demand more than this…
the type of credit card being validated
Great blog posting. I like the idea of a BooleanValidator!
Thanks!
Great Examples.
i have a quesiton about combobox, it seems that when the page first loads, my comboboxes are marked as invalid right away, even before the submit button is clicked.
In your sample however, they do not have the red border around them initially…. is there a way to fix it?
this is a snippit of my code:
[code]
[/code]
and
[code]
[/code]
please help me, i can’t seem to find a solution to this anywere.
Thanks!
-Tanya
oh oh, the code didn’t show… but i hope you get the main idea of my issue.
Thanks!
Tanya,
Here is what I did to get the ComboBox’s border to show as red when invalid.
<mx:NumberValidator id="validator" source="{combo}" property="selectedIndex" minValue="0" invalid="changeComboBorder(event)" valid="changeComboBorder(event);" />
Hopefully this helps.
I guess what Tanya wanted to point was that the ComboBox control is validated on creation. The solution to her query can be achieved by setting the triggerEvent on the validator to “focusOut” of the source.
This would trigger the validation of the comboBox on moving focus from the comboBox.
code below–
If you had a password and confirm password inputs, is there a way to set the validator to check that they are equal?
Hi
I just have one query is there any way to reset the color of the all control when
user clicked first to submit and then to reset it still in red color.
@Albus
I had to do the same and found a piece of code that I changed a little:
Usage:
I’m a bit of a newbie so i hope this isn’t to ugly :)
Hope this helps
Anyone else notice that the Alert box is not resizing to accommodate all the errors? if you click and drag your mouse (like you would to select the text to copy) to the bottom, the top line disappears.
In my alert so error items that are hidden because the Alert box is not sizing big enough to view them all, and some items are line wrapping. I tried resizing the alert box manually, but this did not allow the text itself to use more space.
Any ideas?
Hi,
U have given an example to validate a single check box, but how can i do it for more than two. please help me.
Sorry i need one more help can u also tell me how to put that error msg in an ErrorMessageArray
I’m trying to validate a ZIP Code, but ONLY if the country selected is USA. Otherwise I want the validator to ignore the inputZIPCode TextInput.
Problem is, if I set source and property values in the validator, it will ALWAYS validate what’s in there. If I don’t set source and property values, it will NEVER validate what’s in there. So how do I do it manually?
Here’s my code:
The RegExp override wit username ckeck
here is the code, make the regExp mxml with the new class(id=UserV,set source=pusername,and property=text) set enabled to false. On focusOut on the username field make a server request to check if there is this username
The rest depends to you, so he cant submit the form after username error.
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
errorString
properties 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
Can we just show labels in red, exactly we see when we do mouse over on field, while pressing on submit button, instead of displaying annoying Alert!
Like we see in jQuery validation plug-in, if anyone had experience of it.
How can you validate a DropDownList to not be -1 but can be -3 (If the enter thier own value) and incorporate it into your loop? Thanks! This article was perfect for me!
Hi Peter,
When I use your code in a flex3 project, it works fine.
But when I use flex 4 code I get an error from this line:
var errField:String = FormItem(err.currentTarget.source.parent).label
=> TypeError: Error #1034: Type Coercion failed: cannot convert spark.components::Group@115cad0a1 to spark.components.FormItem
Any tips to solve this ?
Thanks in advance,
James