Validating Flex forms using the Validator classes

StringValidator, ValidationResultEvent, Validators, ZipCodeValidator

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.

45 thoughts on “Validating Flex forms using the Validator classes”

  1. Very nice validation example. You may want to change this line:

    Alert.show(errorMessageArray.join("nn"), "Invalid form...", Alert.OK);

    to

    Alert.show(errorMessageArray.join("\\n"), "Invalid form...", Alert.OK);

    Using “\n” will cause each error to display on its own line.

  4. 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.

    for each (err in validatorErrorArray) {
	var formItem:FormItem;
	///trace("ClassName",getQualifiedClassName(err.currentTarget).split("::")[1]);
	switch (getQualifiedClassName(err.currentTarget).split("::")[1]){
		case "CreditCardValidator":
			formItem = err.currentTarget.cardNumberSource.parent;
		break;
		case "StringValidator":
			formItem = err.currentTarget.source.parent;
		break;
		case "ZipCodeValidator":
			formItem = err.currentTarget.source.parent;
		break;
		default:
			formItem = new FormItem();
			formItem.label = "Misc.";
		break;
	}
    errorMessageArray.push(formItem.label   ": \\n\\t"   err.message.replace(new RegExp('\\n','g'),"\\n\\t"));
}

    Regards,
    Tony

  5. AWESOME….

    Is there a way to display the textInput Name Error message?

    I changed the code, but doesn’t work for me.

    from:

    var errField:String = FormItem(err.currentTarget.source.parent).label

    to:

    var errField:String = TextInput(err.currentTarget.source.parent).id

    CHEERS & THANKS

  6. 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:

    for each (err in validatorErrorArray) {
    var errField:String = err.currentTarget.source.id;
    errorMessageArray.push(errField   ": "   err.message);
}

    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

  7. 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

  8. 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.

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.controls.Alert;

            private function validateCheckBox():void {
                num.val = Number(agree.selected);
                var result:ValidationResultEvent = numVal.validate();

                switch (result.type) {
                    case ValidationResultEvent.INVALID:
                        agree.errorString = result.message;
                        break;
                    case ValidationResultEvent.VALID:
                        Alert.show("If you can see this, you must have selected the check box.", "Valid!!!!");
                        agree.errorString = null;
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Model id="num">
        <val />
    </mx:Model>

    <mx:Array>
        <mx:NumberValidator id="numVal"
                source="{num}"
                property="val"
                minValue="1"
                lowerThanMinError="Please agree before continuing." />
    </mx:Array>

    <mx:CheckBox id="agree"
            label="I have pretended to read your EULA."
            selected="false" />

    <mx:Button label="Continue"
            click="validateCheckBox();" />

</mx:Application>

    Hope that helps,

    Peter

  9. I think thats to extra its easier to just write BooleanValidator here I did it quick and dirty way stripped down code from StringValidator.:

    public class BooleanValidator extends Validator
{

    /**
     *  @private
     *  Loads resources for this class.
     */
    private static function loadResources():void
    {

    }


    public static function validateBoolean(validator:BooleanValidator,
                                          value:Boolean,
                                          baseField:String = null):Array
    {
        var results:Array = [];
        if (!value)
        {
            results.push(new ValidationResult(true));
            return results;
        }

        return results;
    }


    /**
     *  Constructor.
     */
    public function BooleanValidator()
    {
        super();

    }


    override protected function doValidation(value:Object):Array
    {
        var results:Array = super.doValidation(value);

        // Return if there are errors
        // or if the required property is set to false and length is 0.
        var val:String = value ? String(value) : "";
        if (results.length > 0 || ((val.length == 0) && !required))
            return results;
        else
            return BooleanValidator.validateBoolean(this, (value as Boolean), null);
    }
}

    I think you are doing way too much extra just to get checkbox validate.

  10. after that you can just do :

    var temp2:BooleanValidator = new BooleanValidator();
aComp.addEventListener(Event.CHANGE,checkFields);
temp2.source=aComp;/// refference to your checkbox
temp2.property="selected";
temp2.required=true;
myValidators.addItem(temp);

  12. 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?

  14. 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.

  15. 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…

  18. 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

  20. 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);" />
    private function changeComboBorder(event:ValidationResultEvent):void {
  var validator:Validator = event.target as Validator;
  var comboBox:ComboBox = validator.source as ComboBox;
 
  if (event.type == ValidationResultEvent.VALID) {
    comboBox.setStyle("borderColor", 0xB7BABC);
  }
  else {
    comboBox.setStyle("borderColor", 0xFF0000);
  }
}

    Hopefully this helps.

  21. 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–

    <mx:NumberValidator id="comboValidator" required="true" minValue="0"
    	invalid="changeComboBorder(event)" valid="changeComboBorder(event)"
    	triggerEvent="focusOut"
    	source="{trialCombo}" property="selectedIndex" />

  22. If you had a password and confirm password inputs, is there a way to set the validator to check that they are equal?

  23. 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.

  24. @Albus

    I had to do the same and found a piece of code that I changed a little:

    package validator
{
    import mx.validators.ValidationResult;
    import mx.validators.Validator;

    public class StringMatchValidator extends Validator {

        // Define Array for the return value of doValidation().
        private var results:Array;

		// Define compare string
		private var _matches : String = "";

		// Define mismatch error messsage
		private var _mismatchError : String = "Password Dosen't match Retype!";

        // Constructor.
        public function StringMatchValidator() {
            super();
        }

		public function set matches (s : String) : void {
			_matches = s;
		}

		public function set mismatchError (s : String) : void {
			_mismatchError = s;
		}

        // Define the doValidation() method.
        override protected function doValidation(value:Object):Array {
            //var pwd: Password = value as Password;
            var s1: String = _matches;
            var s2: String = source.text;

            results = [];
            results = super.doValidation(value);

            // Return if there are errors.
            if (results.length > 0)
                return results;

                        if(s1 == s2)
                        {
                            return results;
                        }
                        else
                        {
                            results.push(new ValidationResult(true, null, "Mismatch", _mismatchError));
                            return results;
                        }
        }
    }
}

    Usage:

    <validator:StringMatchValidator id="passwordMatchValidator"
        source="{password_confirm}"
        property="text"
        matches="{password.text}" />

    I’m a bit of a newbie so i hope this isn’t to ugly :)

    Hope this helps

  25. 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?

  26. 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.

  28. 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:

    private function valZIPCode():void {
  if (inputCountry.selectedItem.toString() == "USA") {
    var vResult:ValidationResultEvent = zipV.validate(inputZIPCode.text);
    if (vResult.type==ValidationResultEvent.VALID) {
      roZIPCodes.returnCityState(inputZIPCode.text.substring(0,5));
    } else {
      //It should pop up the little red Error Message here - how do I do that?
    }
  }
}

  29. 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

    [....]
private function loadComplete_pusername(e:Event):void{
		var xml:XML=new XML(e.target.data);
		if(xml=="yes"){
			doValidateUsername(false);
			}
		else {
			doValidateUsername(true);
		     }
 
		UserV.enabled=false;
 
	}
	private function doValidateUsername(b:Boolean):void{
	UserV.ErrUsername=b;UserV.enabled=true;UserV.validate();
 
	}
 
 
//Override RegExpValidator, so if the username is in Database and if the the entered username "respects" the regexp
 
public class UsernameValidation extends RegExpValidator
	{
		public var ErrUsername:Boolean=false;
		private var results:Array;
		private var foundMatch:Boolean = false;//true,false i didnt saw the dif (?!?)
		public function UsernameValidation()
		{
			super();
			super.expression="^[a-zA-Z][a-zA-Z0-9_.]{5,}$";
		}
		override protected function doValidation(value:Object):Array
    {
        results=[];
        results = super.doValidation(value);
        var val:String = value ? String(value) : "";
         if(results.length &gt; 0)
			{
				 foundMatch=false;
			if(super.required == true &amp;&amp; value.length == 0)
			{
			results[0].errorMessage = "Acest camp este obligatoriu !";
			}
			else
			{
				 foundMatch=false;
			results[0].errorMessage = "Numele de utilizator nu este valid";
			}
	   	 }
		 if(ErrUsername){
		 	 foundMatch=false;
		 	 results=[];
		 	 //results[0].errorMessage = "Aceast utilizator exista deja in baza de date";
	    	 results.push(new ValidationResult(ErrUsername, null, "NaN","Aceast utilizator exista deja in baza de date"));
		 }
		 else
		 {
		    if(!(results[0] as ValidationResult).isError)
		     foundMatch=true;
		 }
			//trace("RESULT "+(results[0] as ValidationResult).isError+" "+value+" RL: "+results.length);
			return results;
 
		}
 
		override protected function handleResults(errorResults:Array):ValidationResultEvent
    		{
		      super.handleResults(errorResults);
		        var result:ValidationResultEvent;
		        if (foundMatch)
		        {
		            result = new ValidationResultEvent(ValidationResultEvent.VALID);
		            result.results = errorResults;
		        }
		        else
		        {
		            result = super.handleResults(errorResults);
 
		        }
 
		        foundMatch = false;
 
		        return result;
		    }
	}

    The rest depends to you, so he cant submit the form after username error.

  32. 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:

    <mx:FormItem label="I agree to the terms of use" required="true">
<mx:CheckBox id="terms"/>
</mx:FormItem>
<mx:StringValidator source="{terms}" required="true" property="selected" maxLength="4" requiredFieldError="You must agree to the Terms of Use." tooLongError="You must agree to the Terms of Use."/>

    Clean, simple, built-in, and best of all…. 4 lines of MXML.

  33. 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:
    ====================================

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.validators.Validator;
			import mx.validators.EmailValidator;
			import com.vecteurplus.sfa.util.validators.RequiredFieldValidator;
			private var _vList:Array;
			private function hBoxInit():void {
				var require:RequiredFieldValidator = new RequiredFieldValidator();
				var email:EmailValidator = new EmailValidator();
 
				require.required = true;
				require.property = "text";
				require.source = myText;
 
				email.required = false;
				email.property = "text";
				email.source = myText;
 
				_vList = new Array();
				_vList.push(require);
				_vList.push(email);
			}
 
			private function myButton_clickHandler():void {
				var result:Array = Validator.validateAll(_vList);
				if (result) {
					Alert.show("there's error");
				}
			}
		]]>
	</mx:Script>
	<mx:HBox creationComplete="hBoxInit();">
		<mx:TextInput id="myText"/>
		<mx:Button id="myButton"
		label="myButton"
		click="myButton_clickHandler();">
	</mx:HBox>
</mx:Application>

  34. 1. TextInput creates dynamically

    textInputBox = new MyTextInput;
textInputBox.restrict = "0-9.";
textInputBox.maxChars = 24;
amountValidator = new NumberValidator();
amountValidator.source = textInputBox;
amountValidator.property = "text";
amountValidator.allowNegative = false;
amountValidator.domain = "real";
amountValidator.precision = 4;
amountValidator.required = false;
amountValidator.maxValue = 999999999999.9999;
amountValidator.trigger = textInputBox;
amountValidator.triggerEvent = Event.CHANGE;
amountValidator.addEventListener(ValidationResultEvent.VALID, amountValid);
amountValidator.addEventListener(ValidationResultEvent.INVALID, amountInvalid);
 
private function amountValid(event:ValidationResultEvent):void
{
    valid = true;
    fieldsValidated = true;
}
 
private function amountInvalid(event:ValidationResultEvent):void
{
    valid = false;
    fieldsValidated = true;
}

    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

  35. The index for the NumberValidator is off – it doesn’t require a selection if left at 0 that should be changed to 1

  36. Anybody who can help me?
    I want to validate the password ,which the confirm password is right for the password ?

  37. instead of using an init function to push all validators into an array, I would do this:

    <mx:ArrayCollection>
   <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:ArrayCollection>

    Kind regards,

    Marc

  38. 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?

    1. @Jon,

      Try explicitly clearing the errorString properties for each control also:

      private function resetForm(evt:MouseEvent):void {
    shippingName.text = "";
    shippingAddress1.text = "";
    shippingAddress2.text = "";
    shippingCity.text = "";
    shippingState.selectedIndex = -1;
    shippingZipCode.text = "";
 
    shippingName.errorString = "";
    shippingAddress1.errorString = "";
    shippingAddress2.errorString = "";
    shippingCity.errorString = "";
    shippingState.errorString = "";
    shippingZipCode.errorString = "";
}

      Peter

  39. 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.

  40. 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 “”.

  41. 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.

  42. 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!

  43. 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

Comments are closed.