Validating Flex forms using the Validator classes

Thanks Bruce,

Apparently I needed to put two backslashes for it to show up in the entry above. *shrug*

Reply

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

Reply

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

Reply

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

Reply

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);

Reply

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?

Reply

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.

Reply

the type of credit card being validated

Reply

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

Reply

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.

Reply

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

Reply

@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

Reply

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.

Reply

etrwetwe

Reply

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 > 0)
			{
				 foundMatch=false;
			if(super.required == true && 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.

Reply

Thank you very much for your blog – I refer to it often!

Reply

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>

Reply

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

Reply

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

Reply