Pour les besoins de l’un de nos développements Flex, nous avons utilisé les validateurs Flex. De base, le framework nous fournit un ensemble de validateurs (StringValidator, EmailValidator…), mais il se trouve qu’ils ne répondaient pas tous à l’ensemble de nos besoins. En effet, nous avions besoin de valider la longueur d’une suite de chiffres, mais le NumberValidator ne permet pas de valider la longueur… De plus, nous avions aussi besoin d’une longueur minimale…

Heureusement, il est possible d’écrire votre validateur : il suffit de coder une classe ActionScript qui hérite de mx.validators.Validator et de surcharger la méthode doValidation(). Voici notre validateur permettant de contrôler qu’une suite de chiffres doit être comprise entre une longueur minimale et une longueur maximale.

Ecriture du validateur

CustomNumberValidator.as

package validation
{
    import mx.validators.NumberValidator;
    import mx.validators.ValidationResult;
    public class CustomNumberValidator extends NumberValidator {
          public var minLength:Number;
          public var maxLength:Number;
	  public var lengthFieldError:String;
	  public function CustomNumberValidator() {
		super();
	  }
	  override protected function doValidation(value:Object):Array {
          	var results:Array = super.doValidation(value);
		var val:String = value ? String(value) : "";
		// value has to be between minLength and maxLength
		if ((val.length >= minLength && val.length <= maxLength) || ((val.length == 0) && !required)) {
			return results;
		} else {
			return checkForLength(value);
		}
    	   }
	   public function checkForLength(value:Object):Array {
		var results:Array = [];
		results.push(new ValidationResult(
				 true, null, "invalidChar",
				 lengthFieldError));
		return results;
	   }
    }
}

Tout d’abord, nous définissons des variables:

public var minLength:Number; //la longueur minimale de la suite de chiffres
public var maxLength:Number; //la longueur maximale de la suite de chiffres
public var lengthFieldError:String; //message d'erreur si la longueur n'est pas comprise entre minLength et maxLength

Ces 3 variables sont paramétrables lors de la définition du Validator dans le fichier MXML que nous verrons plus loin.

Comme vous pouvez le voir, dans la méthode doValidation() nous récupérons une chaîne (la suite de chiffres), et nous testons si cette dernière est bien comprise entre minLength et maxLength. Si la validation se passe mal, la méthode retournera un tableau de ValidationResult avec le message d’erreur que nous avons défini (lengthFieldError), sinon elle renverra un tableau vide.

Voici le fichier MXML utilisant ce Validator:

XebiaValidator1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:validation="validation.*"
                layout="absolute"
                width="520" height="242">
    <mx:StringValidator id="userNameValidator"
		        source="{userName}"
		        property="text"
		        requiredFieldError="User Name can not be empty !"/>
    <validation:CustomNumberValidator id="commandValidator"
        source="{commandeId}"
        property="text"
        minLength="4"
        maxLength="20"
        domain="int"
        required="true"
        lengthFieldError="Number command has to be between 4 and 20 digits"/>
    <mx:Panel title="Command management" x="86" y="31">
    	   <mx:Form defaultButton="{valideButton}" verticalGap="20">
    	        <mx:FormItem label="User Name">
    	            <mx:TextInput id="userName" styleName="textLogin" width="172"/>
    	        </mx:FormItem>
    	        <mx:FormItem label="Command Number">
    	            <mx:TextInput id="commandeId" width="172"/>
    	        </mx:FormItem>
    	        <mx:FormItem horizontalAlign="right" width="100%">
    	            <mx:Button id="valideButton" label="Validate"/>
    	        </mx:FormItem>
    	    </mx:Form>
    </mx:Panel>
</mx:Application>

Le résultat:

Dans cet exemple, nous utilisons 2 validateurs (StringValidator et CustomNumberValidator). Au passage, afin d’utiliser notre validateur nous avons défini un namespace (xmlns:validation="validation.*")
En ce qui concerne notre validateur, nous retrouvons nos attributs (minLength, maxLength et lengthFieldError) que nous avons renseignés.

Amélioration de la validation

Améliorons notre processus de validation. En effet, pour le moment nous avons les messages d’erreurs lors du remplissage des champs du formulaire (un Tooltip s’affiche en cas d’erreur). Nous allons faire en sorte d’avoir également ces messages lors du click sur le bouton « Validate ».

XebiaValidator2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:validation="validation.*"
                layout="absolute"
                width="520" height="242"
                initialize="this.fillValidators()">
    <mx:Script>
        <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.controls.Alert;
            import mx.core.Application;
            import mx.validators.Validator;
            public var validatorsList:Array;
            public function fillValidators() : void {
                this.validatorsList = new Array();
                this.validatorsList.push(
                userNameValidator,
                commandValidator);
            }
           public function validateForm():void {
            	var validationErrors:Array = Validator.validateAll(this.validatorsList);
                var isValidForm:Boolean = (validationErrors.length == 0);
                if (isValidForm) {
                    Alert.show("Validation OK");
                } else {
                	this.onValidationErrors(validationErrors);
                }
            }
            public function onValidationErrors(errors:Array):void  {
            	var error:ValidationResultEvent;
                var messages:Array = [];
                for each (error in errors) {
                    messages.push(error.message);
                }
                Alert.show(messages.join("n"),
                		   "ERROR",
                		   Alert.OK);
            }
        ]]>
    </mx:Script>
    <mx:StringValidator id="userNameValidator"
		        source="{userName}"
		        property="text"
		        requiredFieldError="User Name can not be empty !"/>
    <validation:CustomNumberValidator id="commandValidator"
        source="{commandeId}"
        property="text"
        minLength="4"
        maxLength="20"
        domain="int"
        required="true"
        lengthFieldError="Number command has to be between 4 and 20 digits"/>
    <mx:Panel title="Command management" x="86" y="31">
    	   <mx:Form defaultButton="{valideButton}" verticalGap="20">
    	        <mx:FormItem label="User Name">
    	            <mx:TextInput id="userName" styleName="textLogin" width="172"/>
    	        </mx:FormItem>
    	        <mx:FormItem label="Command Number">
    	            <mx:TextInput id="commandeId" width="172"/>
    	        </mx:FormItem>
    	        <mx:FormItem horizontalAlign="right" width="100%">
    	            <mx:Button id="valideButton" label="Validate" click="this.validateForm()"/>
    	        </mx:FormItem>
    	    </mx:Form>
    </mx:Panel>
</mx:Application>

Le résultat:

Dans ce fichier, du code ActionScript a fait son apparition. Dans un premier temps la méthode fillValidators(), appelée lors de l’initialisation du composant, remplit une liste composée des validateurs référencés par leurs id.

Par la suite, lors du clic sur « Validate », la méthode validateForm() est appelée. La classe Validator possède une méthode très pratique qui est validateAll(), prenant en paramètre une liste de validateurs. Cette méthode renvoie un tableau vide si la validation a réussi, et sinon il y aura des éléments de type ValidationResultEvent contenant le message que nous affichons. Dans notre exemple, en cas d’erreurs les messages apparaîtront dans une popup.

A travers ces deux exemples, nous voyons que le mécanisme de validation de Flex est assez simple, et écrire ses propres validateurs devient un jeu d’enfant !

Vous pouvez télécharger les sources sur le SVN de Xebia France.