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

Flex Validator: Personnaliser les tooltip d'erreur du CreditCardValidator

Le composant Flex CreditCardValidator vous permet de valider des nombres dont le format suit les règles basiques des numéros de carte de crédit.

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

• Le nombre contient des lettres ou autres caractères: "Invalid characters in your credit card number (Only enter numbers.)"
• Le numéro de carte de crédit est invalide: "The credit card number is invalid"
• Aucun numéro de carte spécifié: "No credit card number specified"
• Aucun type de carte n'est spécifié: "No credit card type specified or the type is not valid."
• Le numéro de carte ne contient pas le bon nombre de chiffre: "Your credit card number contains the wrong number of digits."
• Le type de carte spécifié est incorrect: "Incorrect card type specified"

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

• invalidCharError: Le nombre contient des lettres ou autres caractères
• invalidNumberError: Le numéro de carte de crédit est invalide
• noNumError: Aucun numéro de carte spécifié
• noTypeError: Aucun type de carte n'est spécifié
• wrongLengthError: Le numéro de carte ne contient pas le bon nombre de chiffre
• wrongTypeError: Le type de carte spécifié est incorrect

Flex Validator: Exemple de CreditCardValidator en MXML et ActionScript

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

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

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

    <mx:CreditCardValidator id="ccV"
        cardTypeSource="{cardTypeCombo}" cardTypeProperty="value"
        cardNumberSource="{cardNumberInput}" cardNumberProperty="text"
        trigger="{myButton}" triggerEvent="click"
        cardTypeListener="{cardTypeCombo}"
        cardNumberListener="{cardNumberInput}"

        invalidCharError="Certains caractères ne sont pas valides, n'utilisez que des nombres"
        invalidNumberError="Ce numéro de carte de crédit n'est pas valide"
        noNumError="Aucun numéro de carte de crédit n'est spécifié"
        noTypeError="Aucun type de carte n'est spécifié ou le type spécifié n'est pas valide"
        wrongLengthError="Votre numéro de carte ne contient pas le bon nombre de chiffres"
        wrongTypeError="Le type de carte spécifié n'est pas bon"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple Simple de CreditCardValidator" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form id="creditCardForm">
            <mx:FormItem label="Type de carte">
                <mx:ComboBox id="cardTypeCombo">
                    <mx:dataProvider>
                    	<mx:ArrayCollection>
                        <mx:String>American Express</mx:String>
                        <mx:String>Diners Club</mx:String>
                        <mx:String>Discover</mx:String>
                        <mx:String>MasterCard</mx:String>
                        <mx:String>Visa</mx:String>
                    	</mx:ArrayCollection>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Numéro de carte de crédit">
                <mx:TextInput id="cardNumberInput"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="myButton" label="Vérifier le numéro de carte"/>
            </mx:FormItem>
        </mx:Form>     

    </mx:Panel>
</mx:Application>

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