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

Flex Validator: Personnaliser les tooltip d'erreur du DateValidator

Le composant Flex DateValidator permet de valider des chaînes de caractères représentant des dates.

On a donc accès à deux propriétés principales: allowedFormatChars et inputFormat.

Flex Validator: Exemple de DateValidator en MXML et ActionScript

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

• La propriété inputFormat n'est pas formatée correctement: "Configuration error: Incorrect formatting string."
• La saisie ne contient pas que des nombres et des séparateurs: "Invalid characters in your date"
• Le jour n'existe pas pour le mois entré: "Please enter a valid day for the month"
• La date n'est pas au format spécifié par la propriété inputFormat: "Please type the date in the format inputFormat"
• Le mois n'est pas compris dans la fourchette 1-12: "Please enter a month between 1 and 12"
• L'année entrée n'est pas comprise dans la fourchette 0-9999: "Please enter a year between 0 and 9999"

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

• formatError: La propriété inputFormat n'est pas formatée correctement
• invalidCharError: La saisie ne contient pas que des nombres et des séparateurs
• wrongDayError: Le jour n'existe pas pour le mois entré
• wrongLengthError: La date n'est pas au format spécifié par la propriété inputFormat
• wrongMonthError: Le mois n'est pas compris dans la fourchette 1-12
• wrongYearError: L'année entrée n'est pas comprise dans la fourchette 0-9999

L’exemple suivant montre comment utiliser ce composant Flex DateValidator 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:DateValidator source="{date}" property="text"
        inputFormat="DD/MM/YYYY"
        formatError="Le format inputFormat n'est pas bon"
        invalidCharError="Veuillez n'entrer que des chiffres"
        wrongDayError="Le jour entré n'existe pas à cette date"
        wrongLengthError="Veuillez respecter le format européen"
        wrongMonthError="Le mois entré n'est pas compris entre 1 et 12"
        wrongYearError="L'année entrée n'est pas comprise entre 0 et 9999"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple simple de DateValidator au format européen" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une date du type DD/MM/YYYY: ">
                <mx:TextInput id="date" 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