Adobe Flex Tutorial - Adobe Flex Tutorial

7avr/083

Flex Validator: Personnaliser les messages d'erreur (tooltip)

Lorsque un Validator est lancé et que la donnée n'est pas valide, il affiche un message d'erreur par défaut. Ce message dépend du type de validateur mais aussi de la manière par laquelle la validation n'a pas fonctionné. La classe Validator définit uniquement un type de message qui apparait lorsque le champ requis ne contient aucune donnée. Le message par défaut est "This field is required". Ce message peut être approprié dans certains cas, mais si vous le voulez en Français ou si vous voulez utiliser un message d'erreur personnalisé, vous pouvez en changer la valeur en utilisant la propriété "requiredFieldError" :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	horizontalAlign="center" verticalAlign="middle" viewSourceURL="srcview/index.html">
	<mx:Form>
		<mx:FormHeading label="Formulaire Simple"/>
		<mx:FormItem label="Nom:">
			<mx:TextInput id="username"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:Button id="button" label="Envoyer"/>
		</mx:FormItem>
	</mx:Form>	

	<mx:Validator source="{username}" property="text" requiredFieldError="Veuillez entrer une valeur, merci!"/>

</mx:Application>

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

This movie requires Flash Player 11

Tous les types de validateurs héritent de la propriété "required" et "requiredFieldError", vous pouvez donc fixer une valeur personnalisée de "requiredFieldError" pour tous les types de Validator. Cependant, de nombreux types de validateurs vont échouer pour d'autres raisons que le simple fait d'être requis. Par exemple, un PhoneNumberValidator peut échouer si la donnée contient un caractère invalide. Chaque type de validateur définit aussi des propriétés vous permettant de personnaliser le message d'erreur pour chaque type d'erreur. Par exemple, le code suivant personnalise le message d'erreur lorsque l'utilisateur spécifie un caractère invalide dans un numéro de téléphone:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    horizontalAlign="center" verticalAlign="middle" viewSourceURL="srcview/index.html">
    <mx:Form>
        <mx:FormHeading label="Formulaire Simple"/>
        <mx:Label text="(entrer une lettre pour visualiser le résultat)"/>
        <mx:FormItem label="Numéro de téléphone:">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="button" label="Envoyer"/>
        </mx:FormItem>
    </mx:Form>    

    <mx:PhoneNumberValidator source="{phoneNumber}" property="text" invalidCharError="Veuillez entrer des caractères valides, merci!"/>

</mx:Application>

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

This movie requires Flash Player 11

Les erreurs possibles pour chaque type de validator

La liste des messages d'erreur personnalisables pour les Validator Flex de base (apparait en tooltip rouge):

Remplis sous: Validator || Taggé comme: requiredFieldError, ToolTip, Validator Laisser un commentaire

Articles similaires

Commentaires (3) Trackbacks (0) (Souscrire aux commentaires de cet article)

fabrik
20 janvier 2009

Je ne comprend pas pourquoi cela ne fonctionne pas en AS, y a t'il une raison particulière.
Voici un exemple :

COPIER-COLLER
Actionscript:
var validEmail:EmailValidator = new EmailValidator;

validEmail.listener = = commu;

validEmailResult = validEmail.validate(commu.text);

validEmail.invalidCharError = "Caractère illégal, +^* par exemple.";
fnicollet
20 janvier 2009

Salut,
tu trouveras plus d'infos sur la validation en AS dans cet article:
http://www.flex-tutorial.fr/2008/05/18/flex-validator-declencher-la-validation-en-mxml-et-actionscript/
Sinon, voici un petit exemple qui marche. J'essaie de valider une adresse d*@gmail.com et je me prend le message d'erreur que j'ai mis à l'initialisation:

COPIER-COLLER
MXML:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)" viewSourceURL="srcview/index.html">

<mx:Script>

<![CDATA[

import mx.validators.EmailValidator;

import mx.events.ValidationResultEvent;

import mx.controls.Alert;

private var emailValidator:EmailValidator ;

private function creationCompleteHandler(event:Event):void{

emailValidator = new EmailValidator();

emailValidator.listener = username;

emailValidator.invalidCharError = "caractères invalides";

}

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

var validationResultEvent:ValidationResultEvent = emailValidator.validate("d*@gmail.com");

// 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:Application>
fabrik
20 janvier 2009

Parfait.
L'erreur dans mon code provenait de l'ordre : je lance la validation avant d'assigner une valeur spécifique au message d'erreur, en inversant ce message spécifique est bien pris en compte et écrase le message par défaut qui est en anglais.
Merci pour ton aide