La validation sous Flex

Olivier Bugalotto

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

- Titre : La validation sous Flex

- Auteur : Olivier Bugalotto

- Parution : 20 août 2007

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

Sommaire

- I. Introduction

- II. Les validateurs Flex

- III. Ajout des validateurs

- IV. Déclenchement de la validation

- V. Utilisation de la classe Validator

- VI. Nettoyage des messages d'erreurs

- VII. Les évènements VALID et INVALID

- VIII. Personnaliser les messages d'erreur

- IX. Création d'un composant de validation

- X. Conclusion

- XI. Les sources

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 :

<?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 :

<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 cet exemple c'est qu'il n'empêche pas le « clic » 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 :

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

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 :

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    substitue par la valeur de la variable "email"
var msg:String = StringUtil.substitute("Bienvenue\nVotre courriel est {0}",email);
Alert.show(msg,"Salutation");
}
}

Même résultat, mais code plus pratique

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 :

Nettoyage des messages d'erreurs

<?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 :

<?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}\nPrenom: {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>

Activation du bouton d'enregistrement

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.

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

Message personnalisé

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

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

Différents messages d'erreurs du validateur EmailValidator

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 :

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

Apparence de la bulle d'erreur personnalisée

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 :

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 element
// nous le retournons
if (results.length > 0)
return results;

var strValue:String = String(value);
var compareStrValue:String = String(valueCompare);

// Si ce n'est pas egal a stringCompare nous retourne 0
var result:int = ObjectUtil.stringCompare(strValue,compareStrValue);
if(result) {
var errorMessage:String =
StringUtil.substitute("La valeur {0} n'est pas egale a  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 :

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

Exemple de composant validateur

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 tutoriel ici : Validators.zip (9.72 Mo) (Miroir)