La validation sous Flex

Ce tutoriel vous expliquera comment mettre en place un processus de validation dans vos formulaires.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Le développement de formulaire de saisie demande aussi la mise en place d'une logique de validation des données entrées par l'utilisateur pour garantir leur sécurité. Cette logique peut parfois être longue et fastidieuse.

Voici un exemple de validation :

 
Sélectionnez

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	width="380" height="250" verticalAlign="middle">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function onConnection():void {
				var email:String = txtEmail.text;
				var pass:String = txtPass.text;
 
				var isEmail:Boolean = validateEmail(email);
				var isNoEmpty:Boolean = pass.length != 0;
 
				if(isEmail && isNoEmpty) {
					frmItemEmail.required = frmItemPass.required = false;
					Alert.show("Validation reussie!","Information");
			} else {
					frmItemEmail.required = frmItemPass.required = true;
					Alert.show("Les champs marques par une * sont obligatoire.",
							   "Information");
				}
			}
 
			private function validateEmail(email:String):Boolean {
				var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
				var result:Object = pattern.exec(email);
				if(!result)
					return false;
				return true;
			}
		]]>
	</mx:Script>
 
	<mx:Panel width="316" height="172" layout="absolute" title="Connection">
		<mx:Form right="10" left="10" top="10" bottom="10">
			<mx:FormItem id="frmItemEmail" label="Email" width="100%">
				<mx:TextInput id="txtEmail" width="100%"/>
			</mx:FormItem>
			<mx:FormItem id="frmItemPass" label="Password" width="100%">
				<mx:TextInput id="txtPass" width="100%" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="42" y="128" horizontalAlign="right">
			<mx:Button label="Connection" click="onConnection()"/>
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>

Comme vous pouvez le remarquer la logique de validation est tout de même importante pour valider deux champs de saisies. Imaginez la logique pour des formulaires plus importants comme l'inscription d'un utilisateur.

II. Les validateurs Flex

Le framework de Flex 2 propose un ensemble de composants non visuels nous permettant la validation des données. Ces composants sont appelés des « validateurs »; il en existe plusieurs actuellement :

Composants de validation Description
StringValidator Composant de validation pour les chaînes de caractères
NumberValidator Pour les nombres entiers et à virgules
CurrencyValidator Pour valider les valeurs monétaires
DateValidator Pour valider les dates
EmailValidator Pour valider une adresse électronique
ZipCodeValidator Pour valider un code postal
PhoneNumberValidator Pour les numéros de téléphone
CreditCardValidator Pour les numéros de carte de crédit
SocialSecurityValidator Pour les numéros de sécurité sociale
RegExpValidator Pour les numéros de sécurité sociale

III. Ajout des validateurs

Voici donc notre exemple précédent avec l'emploi des validateurs :

 
Sélectionnez

<mx:EmailValidator id="validEmail" source="{txtEmail}" property="text" />
<mx:StringValidator id="validPass" source="{txtPass}" property="text" />
 
<mx:Panel width="316" height="172" layout="absolute" title="Connection">
	<mx:Form right="10" left="10" top="10" bottom="10">
		<mx:FormItem label="Email" width="100%">
			<mx:TextInput id="txtEmail" width="100%"/>
		</mx:FormItem>
		<mx:FormItem label="Password" width="100%">
			<mx:TextInput id="txtPass" width="100%" displayAsPassword="true"/>
		</mx:FormItem>
	</mx:Form>
	<mx:ControlBar height="42" y="128" horizontalAlign="right">
		<mx:Button id="btnConnect" label="Connection" click="onConnection()" />
	</mx:ControlBar>
</mx:Panel>

Le gros problème avec cette exemple c'est qu'il n'empêche pas le « click » sur le bouton « connection ».

IV. Déclenchement de la validation

Les validateurs déclenchent la validation à la perte du focus du composant à valider.

Ce n'est pas réellement sur l'évènement focusOut mais sur valueCommit que se produit la validation.

Il nous faut modifier ce comportement et déclencher la validation sur l'action du « click » du bouton. Il suffit pour cela de modifier la propriété triggerEvent mais aussi la propriété trigger du validateur :

 
Sélectionnez

<mx:EmailValidator id="validEmail" source="{txtEmail}" property="text" 
		trigger="{btnConnect}" triggerEvent="click" />
<mx:StringValidator id="validPass" source="{txtPass}" property="text" 
		trigger="{btnConnect}" triggerEvent="click" />

Cela ne résout pas le problème, nous avons bien la validation sur le « click » du bouton mais cela n'empêche pas l'affichage de la fenêtre d'alerte. Pour résoudre ce problème, il suffit d'exécuter les méthodes validate() des validateurs qui vont nous retourner un événement que nous testerons :

 
Sélectionnez

private function onConnection():void {
	var email:String = txtEmail.text;
	var pass:String = txtPass.text;	
 
	var reValidEmailEvent:ValidationResultEvent = validEmail.validate();
	var reValidPassEvent:ValidationResultEvent = validPass.validate();
 
	// Nous testons sur l'evenement retourne par la methode validate()
	if(reValidEmailEvent.type == ValidationResultEvent.VALID
		  && reValidPassEvent.type == ValidationResultEvent.VALID) {
		// La methode StringUtil.substitute permet d'utiliser des indices
		// pour les substituer par les parametres :
		// ici {0} sera	substitue par la valeur de la variable "email"
		var msg:String = StringUtil.substitute("Bienvenue\nVotre courriel est {0}",email);
		Alert.show(msg,"Salutation");  	
	}				
}

V. Utilisation de la classe Validator

En y regardant de plus près, la logique pour valider les champs reste encore lourde dans le cas d'un long formulaire. Il faudrait pouvoir valider le tout en une seule fois et bien cela est possible avec la classe Validator ; la classe Validator est la classe de base pour les validateurs prédefinis.

Cette classe propose la méthode statique et très pratique validateAll() qui valide un tableau de validateurs et renvoie un tableau vide si la validation a réussi :

 
Sélectionnez

private function onConnection():void {
	var email:String = txtEmail.text;
	var pass:String = txtPass.text;	
 
	var validators:Array = Validator.validateAll([validEmail,validPass]);
 
	// Si le tableau contient au moins un element
	// cela indique une erreur
	if(!validators.length) {
		// La methode StringUtil.substitute permet d'utiliser des indices
		// pour les substituer par les parametres :
		// ici {0} sera	substitué par la valeur de la variable "email"
		var msg:String = StringUtil.substitute("Bienvenue\nVotre courriel est {0}",email);
		Alert.show(msg,"Salutation");  	
	}				
}

Dans le cas où le tableau contient au moins un élément, ce dernier est un élément de type ValidationResultEvent.

VI. Nettoyage des messages d'erreurs

Nous pouvons aussi nettoyer les messages d'erreurs en modifiant la propriété errorString des composants à valider :

 
Sélectionnez

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	verticalAlign="middle" width="450" height="250" horizontalAlign="left" 
	backgroundGradientColors="[#8080ff, #c0c0c0]">
 
	<mx:Script>
		<![CDATA[
			import mx.validators.Validator;
			import mx.utils.StringUtil;
			import mx.controls.Alert;
			import mx.events.ValidationResultEvent;
 
			private function onConnection():void {
				var email:String = txtEmail.text;
				var pass:String = txtPass.text;	
 
				var validators:Array = Validator.validateAll([validEmail,validPass]);
 
				if(!validators.length) {
					var msg:String = StringUtil.substitute(
							"Bienvenue\nVotre courriel est {0}",email);
					Alert.show(msg,"Salutation");  	
				}				
			}
 
			private function onResetForm():void {
				// Suppression du nom d'utilisateur saisi
				txtEmail.text = "";
				// Suppression du message d'erreur
				txtEmail.errorString = "";
 
				txtPass.text = "";
				txtPass.errorString = "";
			}
		]]>
	</mx:Script>
 
	<mx:EmailValidator id="validEmail" source="{txtEmail}" property="text"
		trigger="{btnConnect}" triggerEvent="click" 
		requiredFieldError="Ce champ est obligatoire."
		missingAtSignError="Le charactere @ est manquant dans votre adresse email."
		missingPeriodInDomainError="Le domaine est manquant dans votre adresse email."
		missingUsernameError="Le nom d'utilisateur est manquant dans votre adresse email." />
	<mx:StringValidator id="validPass" source="{txtPass}" property="text" 
		trigger="{btnConnect}" triggerEvent="click"
		requiredFieldError="Ce champ est obligatoire." />
 
	<mx:Panel width="316" height="172" layout="absolute" title="Connection" 
		titleIcon="@Embed('assets/network.png')">
		<mx:Form right="10" left="10" top="10" bottom="10">
			<mx:FormItem label="Email" width="100%">
				<mx:TextInput id="txtEmail" width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Password" width="100%">
				<mx:TextInput id="txtPass" width="100%" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="42" y="128" horizontalAlign="right">
			<mx:Button label="Reset" click="onResetForm()"/>
			<mx:Button id="btnConnect" label="Connection" click="onConnection()" />
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>

VII. Les évènements VALID et INVALID

Nous pouvons gérer la validation en écoutant les évènements valid et invalid émis par le composant de validation ou par le composant de saisie lui-même.

Dans cet exemple, nous écoutons les deux évènements sur le composant de validation pour activer ou non le bouton d'enregistrement :

 
Sélectionnez

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	verticalAlign="middle">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.utils.StringUtil;
			private function onValid():void {
				btnSave.enabled = true;
			}
 
			private function onInvalid():void {
				btnSave.enabled = false;	
			}
 
			private function onSave():void {
				var email:String = txtEmail.text;
				var nom:String = txtNom.text ? txtNom.text : "";
				var prenom:String = txtPrenom.text ? txtPrenom.text : "";
 
				var msg:String = StringUtil.substitute("Courriel: {0}\nNom: " + 
						"{1}\nPrénom: {2}",email,nom,prenom);
 
				Alert.show(msg,"Nouveau contact");
			}
		]]>
	</mx:Script>
 
	<mx:EmailValidator source="{txtEmail}" property="text"
		valid="onValid()" invalid="onInvalid()" />
 
	<mx:Panel title="Contact" width="284" height="202" layout="absolute" 
		titleIcon="@Embed('assets/addressbook2.png')">
		<mx:Form right="10" left="10" top="10" bottom="10">
			<mx:FormItem label="Courriel" width="100%" required="true">
				<mx:TextInput id="txtEmail" width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Nom" width="100%">
				<mx:TextInput id="txtNom" width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Pseudo" width="100%">
				<mx:TextInput id="txtPrenom" width="100%"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="41" y="143" horizontalAlign="right">
			<mx:Button id="btnSave" label="Enregistrer" enabled="false"
				click="onSave()"/>
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>

VIII. Personnaliser les messages d'erreur

Nous allons voir comment personnaliser les messages d'erreurs qui jusqu'à maintenant été définis par défaut et qui plus est en anglais.

La classe de base Validator possède la propriété requiredFieldError qui permet de modifier les messages d'erreur.

 
Sélectionnez

<mx:EmailValidator id="validEmail" source="{txtEmail}" property="text"
		trigger="{btnConnect}" triggerEvent="click" 
		requiredFieldError="Ce champ est obligatoire." />
<mx:StringValidator id="validPass" source="{txtPass}" property="text" 
		trigger="{btnConnect}" triggerEvent="click"
		requiredFieldError="Ce champ est obligatoire." />

Mais chaque validateur propose différents messages d'erreur, comme c'est le cas ici avec EmailValidator :

 
Sélectionnez

<mx:EmailValidator id="validEmail" source="{txtEmail}" property="text"
		trigger="{btnConnect}" triggerEvent="click" 
		requiredFieldError="Ce champ est obligatoire."
		missingAtSignError="Le charactere @ est manquant dans votre adresse email."
		missingPeriodInDomainError="Le domaine est manquant dans votre adresse email."
		missingUsernameError="Le nom d'utilisateur est manquant dans votre adresse email." />
<mx:StringValidator id="validPass" source="{txtPass}" property="text" 
		trigger="{btnConnect}" triggerEvent="click"
		requiredFieldError="Ce champ est obligatoire." />

Nous pouvons aussi personnaliser le style de la bulle d'erreur. Pour cela, il suffit de modifier le style .errorTip défini par défaut dans la feuille de style default.css que vous trouverez dans le répertoire du Flex SDK 2; dans notre exemple, nous allons simplement modifier la couleur de la bulle :

 
Sélectionnez

<mx:Style>
	.errorTip {
		borderColor: #8080ff;
	}
</mx:Style>

IX. Création d'un composant de validation

Pour construire un nouveau composant de validation, il faut créer une nouvelle classe qui hérite de Validator et redéfinir la méthode doValidation(). C'est cette méthode qui est responsable de la validation.

Nous allons créer un composant de validation qui va comparer deux champs de saisie comme c'est souvent le cas lorsque nous faisons confirmer un mot de passe :

 
Sélectionnez

package {
	import mx.validators.Validator;
	import mx.utils.ObjectUtil;
	import mx.validators.ValidationResult;
	import mx.utils.StringUtil;
 
	public class CompareStringValidator extends Validator {
		private var results:Array;
 
		public var valueCompare:Object;
 
		public function CompareStringValidator() {
			super();
		}
 
		protected override function doValidation(value:Object):Array {
			// Initialise le tableau des erreurs
            results = [];
 
            results = super.doValidation(value);        
 
			// Si le tableau contient au moins un élément
			// nous le retournons
            if (results.length > 0)
                return results;
 
 
			var strValue:String = String(value);
			var compareStrValue:String = String(valueCompare);
 
			// Si ce n'est pas égale stringCompare nous retourne 0
			var result:int = ObjectUtil.stringCompare(strValue,compareStrValue);
			if(result) {
				var errorMessage:String = 
					StringUtil.substitute("La valeur {0} n'est pas égale à la " +
 								"valeur {1}",strValue,compareStrValue);
					// Ici, nous construisons un evenement ValidationResult
					// pour l'ajouter au tableau
					results.push(new ValidationResult(true,null,
					      "Comparaison invalide",errorMessage));
			}
 
			// Nous retournons le tableau
			return results;
		}
	}
}

Et maintenant voici son utilisation dans votre application :

 
Sélectionnez

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns="*">
 
    <!-- l'attribut (propriete) sourceCompare est la valeur de comparaison -->
	<CompareStringValidator source="{txtComparePass}" property="text" sourceCompare="{txtPass.text}" />
 
	<mx:Panel width="340" height="207" layout="absolute" title="Inscription">
		<mx:Form right="10" left="10" top="10" bottom="10">
			<mx:FormItem label="Email" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="Password" width="100%">
				<mx:TextInput id="txtPass" width="100%" displayAsPassword="true"/>
			</mx:FormItem>
			<mx:FormItem label="Confirm password" width="100%">
				<mx:TextInput id="txtComparePass" width="100%" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar horizontalAlign="right">
			<mx:Button label="Enregistrer"/>
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>

X. Conclusion

Les composants de validation apportent un certain confort mais nous sentons qu'il y a encore un travail à faire comparé à la validation que nous pouvons trouver dans d'autres langages.

XI. Les sources

Vous trouverez le code source de ce tutorial ici : Validators.zip (9.72 Mo) (Miroir)

Retrouvez cet article et d'autres sur http://iteratif.developpez.com ou bien sur mon blog : http://www.iteratif.fr/blog

  

Copyright © 2007 Olivier Bugalotto. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.