Adobe Flex Tutorial - Adobe Flex Tutorial

21avr/085

Flex Validator: Personnaliser les tooltip d'erreur du PhoneNumberValidator

Le composant Flex PhoneNumberValidator permet de vérifier la validité d'un numéro de téléphone (mais pas son affectation).

Lorsque la validation ne se fait pas, un tooltip s'affiche avec des valeurs par défaut:

L'adresse email contient des caractères invalides: "Invalid characters in your phone number"
La taille de la chaîne n'est pas la bonne: "Your telephone number must be at least 10 digits in length"

Pour pouvoir personnaliser ces messages, pour les écrire en français pas exemple, l'objet PhoneNumberValidator possède deux propriétés:

invalidCharError: Le numéro de téléphone contient des caractères invalides
wrongLengthError: La taille de la chaîne n'est pas la bonne (inférieure à 10 caractères)

Flex Validator: Exemple de PhoneNumberValidator en MXML et ActionScript

L’exemple suivant montre comment utiliser ce composant Flex PhoneNumberValidator avec des messages d'erreur personnalisés:

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

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:PhoneNumberValidator source="{phone}" property="text"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"
        invalidCharError="Il y a des caractères invalides dans ce numéro de téléphone"
        wrongLengthError="Veuillez entrer au moins 10 chiffres"
        />

    <mx:Panel title="Exemple simple de PhoneNumberValidator avec erreurs personalisées" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez un numéro de téléphone: ">
                <mx:TextInput id="phone" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

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

This movie requires Flash Player 11

Remplis sous: Exemple, PhoneNumberValidator, Validator || Taggé comme: invalidCharError, PhoneNumberValidator, Validator, wrongLengthError Laisser un commentaire

Articles similaires

Commentaires (5) Trackbacks (2) (Souscrire aux commentaires de cet article)

Azerwhite
3 décembre 2008

Salutation,

J'ai un formulaire de base que l'on obtient après une connexion à une BBD mysql en allant sur DATE/creat application from database, on a un fichier.MXML et un autre (entre autre) .AS
Quand je mets le code de '"L' exemple suivant montrent comment utiliser ce composant Flex PhoneNumberValidator en MXML:"' en précisant les paramètres invalidCharError et wrongLengthError ben, il me dit
Component declarations are not allowed here. (Note: visual children must implement mx.core.IUIComponent) MysqlFlex/src profile.mxml
et lorsque je mets le code de l'exemple pour l'avoir en AS3 que je mets dans mon .AS je précise la bonne source Je lance le programme et lorsque je ne remplie pas les conditions pour le numéro de téléphone.... il ne fait rien il valide alors qu'il ne devrait pas.

Help...
fnicollet
3 décembre 2008

Salut,
je pense que tu as essayé de mettre les validators MXML dans un conteneur. Il faut que tu les mettes directement dans le tag <mx:Application>, bien à l'extérieur du reste car ce ne sont pas des composants visuels.
Pour le code en AS3, vérifie que tu as bien la bonne source (le bon id) et que tu as fixé la propriété "property" de ton validateur comme dans l'exemple. Si ces deux propriétés sont fixées, tu devrais au moins avoir le message d'erreur comme quoi le champ est requis si tu valides le champ vide.
Si tu as encore des problèmes avec tes validators, envoie ton code en commentaire.

Fabien
azerwhite
4 décembre 2008

Bon, je continue à chercher mais en attendant. Voici ce que j'ai

Un fichier profileScript.as qui contient entre autre:

import mx.controls.Alert;
import mx.validators.PhoneNumberValidator;
ET
public function phoneNumberValidator():void {
var phoneNumberValidator:PhoneNumberValidator = new PhoneNumberValidator()
phoneNumberValidator.source = telephoneCol
phoneNumberValidator.property = "text"
//triggerEvent="click"
phoneNumberValidator.allowedFormatChars="()- .+"
phoneNumberValidator.invalidCharError= 'Le numéro de téléphone contient des caractères invalides'
phoneNumberValidator.wrongLengthError= "La taille de la chaîne n'est pas la bonne (inférieure à 10 caractères)"
}

Et un fichier profile.mxml qui contient entre autre:

mon formulaire que j'ai réduit pour pas faire trop gros (d'ailleurs elles sortent d'où ces balises canvas ?):

Le problème vient du fait que je ne sais pas si Ma fonction phoneNumberValidator est correcte et au bonne endroit...
Et après dans mon fichier mxml, je sais pas trop comment je dois lui dire qu'il doit faire un truc en rapport avec phoneNumberValidator même si je penses que avec source = telephoneCol et
property = "text" ça devrait suffir.

Bref... sinon je connais surtout le php, j'ai fait du C mais niveau AS3 .... aie aie aie
azerwhite
4 décembre 2008

Grâce à tes conseils et à deux seconde de réflexion , j'ai réussis à faire marcher la validation en Mxml mais toujours pas en AS3.

J'ai une question en mxml: Si on veut mettre plusieurs source par exemple fixe et portable
source="{phone}" Comment fait-on ?
Doit-on refaire un validator ? non, je penses pas mais comment préciser plusieurs sources ?
fnicollet
5 décembre 2008

Salut,
désolé mais le MXML de ton commentaire a été mangé par WordPress (il faut transformer les "< " et les ">" en caractères HTML, il faut que je corrige ça).
le code a l'air bon, es tu sûr que ta fonction est bien appelée (à l'événement creationComplete de l'application par exemple) ?
Sinon, pour mettre plusieurs sources dans un validator MXML, je ne crois pas que ça soit possible. Pour créer un validator générique, tu peux utiliser ce code:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[

import flash.events.Event;

private function performValidation(eventObj:Event):void {
phoneV.listener=eventObj.currentTarget;
phoneV.validate(eventObj.currentTarget.text);
}
]]>
</mx:Script>

<mx:PhoneNumberValidator id="phoneV"
triggerEvent=""/>

<mx:TextInput id="shippingPhone"
focusOut="performValidation(event);"/>
<mx:TextInput id="billingPhone"
focusOut="performValidation(event);"/>
</mx:Application>