Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Validator: Déclencher la validation en MXML et ActionScript

Pour être lancé, un Validator doit d'abord être déclenché (triggered). Le trigger (déclencheur) par défaut pour un validateur est l'événement valueCommit, qui est dispatché par l'objet référencé comme "source" du validateur. La plupart du temps, cette valeur est appropriée car l'événement valueCommit est envoyé par tous les contrôles de type input quand la valeur est fixé de manière programmatique ou lorsque l'on enlève le focus d'un contrôle (clic à l'extérieur).

Cependant, vous pourriez vouloir changer la manière dont est déclenchée la validation. Par exemple, même si on pense tout de suite à utiliser un contrôle de type input pour être validé, vous voudriez peut-être utiliser un autre type de contrôle ou de propriété. Si le type d'objet que vous utilisez ne propage pas d'événements valueCommit, la validation ne sera jamais déclenchée. Un autre scénario plus probable serait que vous voudriez que la validation se fasse lorsque l'utilisateur clique sur un bouton, et non pas quand il sort le focus du contrôle.

Les deux propriétés d'un Validator que vous pouvez utiliser pour changer le déclencheur sont "trigger" et "triggerEvent". La propriété "trigger" a besoin d'un référence vers l'objet que vous voulez utiliser comme déclencheur. La propriété triggerEvent a besoin du nom de l'événement que vous voulez utiliser pour déclencher le validateur.

L'exemple suivant utilise l'événement "click" du bouton pour déclencher la validation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem id="userNameItem" label="Nom">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Valider"/>
		</mx:FormItem>
	</mx:Form>

	<mx:Validator id="validator" source="{username}" property="text" trigger="{button}" triggerEvent="click"/>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Vous pouvez avoir plus de contrôle sur quand et comment vous voulez lancer les validateurs en utilisant de l'ActionScript. Tous les Validator ont une méthode validate() permettant de lancer la validation. Pour appeler cette méthode, il faut que votre validator ait une propriété id.

Vous devez fixer la propriété "trigger" du Validator à "null" pour que la validation ne se fasse pas et ainsi le déclencher en ActionScript.

La méthode validate() ne fait pas que de valider la donnée, elle renvoie aussi un objet de type ValidationResultEvent, qui vous indique si la validation s'est bien passée. La propriété "type" de cet objet est soit valid ou invalid (pour lesquelles vous pouvez utiliser les constantes ValidationResultEvent.VALID et ValidationResultEvent.INVALID). L'exemple suivant utilise la méthode validate() pour afficher une Alert lorsque l'utilisateur clique sur le bouton mais ne remplit pas un champ requis.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;

			private function runValidators(event:Event):void{
				// lance la validation, grâce à la méthode validate() et assigne le résultat
				// à une variable
				var validationResultEvent:ValidationResultEvent = validator.validate(null, true);

				// si le résultat de la validation est incorrect,
				// on affiche une Alert
				if (validationResultEvent.type == ValidationResultEvent.INVALID){
					Alert.show("Veuillez spécifier une valeur");
				}

			}
		]]>
	</mx:Script>

	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem id="userNameItem" label="Nom">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Valider" click="runValidators(event)"/>
		</mx:FormItem>
	</mx:Form>

	<mx:Validator id="validator" source="{username}" property="text" trigger="{null}"/>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Lorsque vous travaillez avec plus d'un Validator, et que vous voulez appelez la méthode validate() de chacun, vous pouvez appeler la méthode validate() de chacun ou utiliser la méthode static validateAll() de la classe Validator. La méthode validateAll() prend un tableau en paramètre dont tous les éléments sont des objets validator. La méthode validateAll() retourne un tableau avec tous les objets ValidationResultEvent retournés par les validateurs qui ne sont pas valides. Si toutes les validations sont passées, le tableau est vide. L'exemple suivant utilise 4 validateurs. Quand l'utilisateur clique sur le bouton, le bouton propage un événement appelant une fonction qui lance validateAll(), et affiche une Alert indiquant à l'utilisateur quels champs n'ont pas été validés.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initializeHandler(event)"
	viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;
			import mx.validators.Validator;

			private var _validators:Array;

			private function initializeHandler(event:Event):void{
				// crée un tableau avec tous les validators
				_validators = [usernameValidator, phoneValidator, emailValidator, zipcodeValidator];
			}

			private function runValidators(event:Event):void{
				// déclenche tous les validateurs
				var results:Array = Validator.validateAll(_validators);

				// si le tableau est vide, tout s'est bien passé
				// sinon, au moins un des validateurs n'est pas passé
				if (results.length > 0){
					 var message:String = "Les champs suivant sont incorrects:\n";

					 //boucle sur les résultats et retrouve l'id correspondant
					 for (var i:uint = 0;i<results.length;i++){
					 	message  += results[i].target.source.id + "\n";
					 }
					 Alert.show(message);
				}

			}
		]]>
	</mx:Script>

	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem id="userNameItem" label="Nom">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem label="Téléphone">
			<mx:TextInput id="phone"/>
		</mx:FormItem>
		<mx:FormItem label="Email">
			<mx:TextInput id="email"/>
		</mx:FormItem>
		<mx:FormItem label="Code Postal">
			<mx:TextInput id="zipcode"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Valider tous les champs" click="runValidators(event)"/>
		</mx:FormItem>
	</mx:Form>

	<mx:Validator id="usernameValidator" source="{username}" property="text"/>
	<mx:PhoneNumberValidator id="phoneValidator" source="{phone}" property="text"/>
	<mx:EmailValidator id="emailValidator" source="{email}" property="text"/>
	<mx:ZipCodeValidator id="zipcodeValidator" source="{zipcode}" property="text"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application