Remarque :

Les widgets Spry ont été remplacés par des widgets jQuery sous Dreamweaver CC et versions ultérieures. Bien qu’il soit toujours possible de modifier des widgets Spry sur votre page, vous ne pouvez pas en ajouter de nouveaux.

À propos du widget Validation de zone de texte

Le widget Validation Spry de champ de texte est un champ de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre du texte. Par exemple, vous pouvez ajouter un widget Validation de zone de texte à un formulaire dans lequel le visiteur doit entrer son adresse électronique. S’il ne tape pas de symbole « @ » ni de point dans l’adresse, le widget affiche un message qui indique que les informations entrées ne sont pas valides.

L’exemple suivant montre un widget Validation de zone de texte dans différents états :

À propos widget Validation de zone de texte
À propos du widget Validation de zone de texte

A. Widget Champ de texte, conseil activé B. Widget Champ de texte, état valide C. Widget Champ de texte, état non valide D. Widget Champ de texte, état obligatoire 

Le widget Validation de zone de texte peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les propriétés de ces états à l’aide de l’inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Validation de zone de texte peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu’il entre des données ou lorsqu’il tente d’envoyer le formulaire.

Etat initial

Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l’utilisateur réinitialise le formulaire.

Etat actif

Etat du widget lorsque l’utilisateur place le point d’insertion à l’intérieur.

Etat valide

Etat du widget lorsque l’utilisateur a entré des informations correctes, ce qui permet l’envoi du formulaire.

Etat non valide

Etat du widget si l’utilisateur a entré du texte dans un format non valide. Par exemple, 06 pour l’année au lieu de 2006.

Etat obligatoire

Etat du widget lorsque l’utilisateur n’a pas entré du texte obligatoire dans la zone de texte.

Nombre minimal de caractères

Etat du widget lorsque l’utilisateur a entré moins de caractères que le nombre minimal requis pour le champ de texte.

Nombre maximal de caractères

Etat du widget lorsque l’utilisateur a entré plus de caractères que le nombre maximal admis pour le champ de texte.

Valeur minimale

Etat du widget lorsque l’utilisateur a entré une valeur inférieure à la valeur requise par la zone de texte. S’applique aux validations de type entier, réel et date.

Valeur maximale

Etat du widget lorsque l’utilisateur a entré une valeur supérieure à la valeur maximale admise par la zone de texte. S’applique aux validations de type entier, réel et date.

Lorsqu’un widget Validation de zone de texte passe dans l’un de ces états suite à l’interaction avec l’utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l’exécution. Par exemple, si un utilisateur tente d’envoyer un formulaire mais n’a pas entré de texte dans un champ obligatoire, Spry applique au widget une classe qui le force à afficher le message d’erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d’affichage de messages d’erreur se trouvent dans le fichier CSS qui accompagne le widget, SpryValidationTextField.css.

Le code HTML par défaut du widget Validation de zone de texte, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input> du champ de texte. Le code HTML du widget Validation de zone de texte comprend également des balises script dans l’en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de zone de texte, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_sprytextfield_fr.

Insertion et modification du widget Validation de zone de texte

Insertion du widget Validation de zone de texte

  1. Choisissez Insertion > Spry > Validation Spry de champ de texte.
  2. Complétez la boîte de dialogue Attributs d’accessibilité à des balises objet, puis cliquez sur OK.

Remarque :

Vous pouvez également insérer un widget Validation de zone de texte par l’intermédiaire de la catégorie Spry du panneau Insertion.

Définition d’un type de validation et d’un format

Vous pouvez définir différents types de validation pour le widget Validation de zone de texte. Par exemple, vous pouvez définir un type de validation Carte de crédit si la zone de texte est destinée à contenir des numéros de carte de crédit.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), choisissez un type de validation dans le menu déroulant Type.
  3. Le cas échéant, sélectionnez un format dans le menu déroulant Format.

Pour la plupart des types de validation, la zone de texte attend un format standard. Par exemple, si vous appliquez le type de validation Entier à une zone de texte, le widget n’effectue de validation que si l’utilisateur a entré des chiffres dans la zone de texte. Toutefois, certains types de validation permettent de choisir le type de format que votre zone de texte acceptera. Le tableau suivant énumère les types de validation et les formats disponibles dans l’inspecteur Propriétés :

Type de validation

Format

Aucun

Aucun format particulier requis.

Nombre entier

La zone de texte n’accepte que des chiffres.

Adresse électronique

La zone de texte accepte les adresses électroniques contenant un @ et un point (.) précédé et suivi d’au moins une lettre.

Date

Formats variables. Sélectionnez-en un dans le menu Format de l’inspecteur Propriétés.

Heure

Formats variables. Sélectionnez-en un dans le menu Format de l’inspecteur Propriétés. « tt » représente le format am/pm et « t » le format a/p.

Carte de crédit

Formats variables. Sélectionnez-en un dans le menu Format de l’inspecteur Propriétés. Vous pouvez décider d’accepter toutes les cartes de crédit ou spécifier un type de carte particulier (MasterCard, Visa, etc.). Le champ de texte n’accepte pas les espaces dans un numéro de carte de crédit (p.ex. 4321 3456 4567 4567).

Code postal

Formats variables. Sélectionnez-en un dans le menu Format de l’inspecteur Propriétés.

Numéro de téléphone

La zone de texte accepte les numéros de téléphone mis en forme pour les Etats-Unis et le Canada, à savoir (000) 000-0000, ou les formats personnalisés. Si vous sélectionnez le format personnalisé, entrez ce format, par exemple 000.00(00), dans la zone Schéma.

Numéro de sécurité sociale

La zone de texte accepte les numéros de sécurité sociale en format 000-00-0000. Si vous voulez utiliser un format différent, choisissez Personnalisé comme type de validation, puis spécifiez un modèle. Le mécanisme de validation par modèle n’accepte que les caractères ASCII.

Devise

La zone de texte accepte les devises en format 1,000,000.00 ou 1.000.000,00.

Nombre réel/Notation scientifique

Valide divers types de nombres : les entiers (par exemple 1), les valeurs flottantes (par exemple 12,123) et les valeurs flottantes en notation scientifique (par exemple 1,212e+12, 1,221e-12, où e représente une puissance de 10).

Adresse IP

Formats variables. Sélectionnez-en un dans le menu Format de l’inspecteur Propriétés.

URL

La zone de texte accepte les URL en format http://xxx.xxx.xxx ou ftp://xxx.xxx.xxx.

Personnalisé

Permet de choisir un type et un format de validation personnalisé. Entrez le schéma du format (et une indication, si nécessaire), dans l’inspecteur Propriétés. Le mécanisme de validation par modèle n’accepte que les caractères ASCII.

Définition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu’il tape des données ou lorsqu’il tente d’envoyer le formulaire.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l’option qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options, ou uniquement onSubmit.

    onBlur

    Validation quand l’utilisateur clique en dehors de la zone de texte.

    Remplacer

    Validation lorsque l’utilisateur modifie du texte à l’intérieur de la zone de texte.

    onSubmit

    Validation lorsque l’utilisateur tente d’envoyer le formulaire. L’option onSubmit est activée par défaut et ne peut pas être désactivée.

Définition d’un nombre minimal et maximal de caractères

Cette option n’est disponible que pour les types de validation Aucun, Nombre entier, Adresse électronique et URL.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou Nbre max. de caract. Par exemple, si vous entrez 3 dans la zone Nbre min. de caract., le widget n’effectue la validation que si l’utilisateur entre au moins 3 caractères.

Définition des valeurs minimale et maximale

Cette option n’est disponible que pour les types de validation Nombre entier, Heure, Devise et Nombre réel/Notation scientifique.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Valeur min. ou Valeur max. Par exemple, si vous entrez 3 dans la zone Valeur min., le widget n’effectue de validation que si l’utilisateur entre le chiffre 3 ou une valeur plus élevée (4, 5, 6 etc.) dans la zone de texte.

Affichage des états du widget en mode Création

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l’état à afficher dans le menu déroulant Aperçu des états. Par exemple, si vous voulez afficher le widget dans son état valide, sélectionnez Valide.

Modification de l’état obligatoire d’une zone de texte

Par défaut, tous les widgets Validation de zone de texte que vous insérez à l’aide de Dreamweaver exigent que l’utilisateur y entre des données lorsqu’ils sont publiés sur une page web. Vous pouvez toutefois rendre la saisie de texte dans certaines zones facultative pour l’utilisateur.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l’option Obligatoire, en fonction de vos préférences.

Création d’un conseil pour une zone de texte

Comme les zones de texte peuvent posséder de multiples formats, il peut être utile de donner aux utilisateurs un conseil relatif aux données qu’ils doivent entrer. Par exemple, une zone de texte possédant le type de validation Numéro de téléphone n’accepte que les numéros en format (000) 000-0000. Vous pouvez entrer cet exemple de numéro sous la forme d’un conseil, de manière à ce que la zone affiche le format correct lorsque l’utilisateur charge la page dans un navigateur.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.

Blocage des caractères incorrects

Vous pouvez empêcher les utilisateurs d’entrer des caractères non valides dans un widget Validation de zone de texte. Par exemple, si vous activez cette option pour un widget possédant le type de validation Nombre entier, rien ne s’affiche dans le champ si l’utilisateur tente d’y taper une lettre.

  1. Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez l’option Imposer modèle.

Personnalisation du widget Validation de zone de texte

Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Validation de zone de texte, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de zone de texte de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l’adresse www.adobe.com/go/learn_dw_sprytextfield_custom_fr.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationTextField.css. Dreamweaver enregistre le fichier SpryValidationTextField.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de zone de texte. La consultation de ce fichier peut s’avérer utile, car il contient des informations commentées au sujet des différents styles qui s’appliquent au widget.

Remarque :

Même s’il est facile de modifier directement les règles du widget Validation de zone de texte dans le fichier CSS qui l’accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Définition du style du texte de message d’erreur d’un widget Validation de zone de texte

Par défaut, les messages d’erreur du widget Validation de zone de texte s’affichent en rouge, entourés d’un bord épais de 1 pixel.

  1. Pour modifier le style des messages d’erreur d’un widget Champ de texte de validation, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte:

    Texte à modifier

    Règle CSS pertinente

    Propriétés à modifier

    Texte de message d’erreur

    .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

Modification des couleurs d’arrière-plan du widget Validation de zone de texte

  1. Pour modifier les couleurs d’arrière-plan du widget Validation de zone de texte dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d’arrière-plan par défaut :

    Couleur à modifier

    Règle CSS pertinente

    Propriété à modifier

    Couleur d’arrière-plan du widget dans un état valide

    .textfieldValidState input, input.textfieldValidState

    background-color: #B8F5B1;

    Couleur d’arrière-plan du widget dans un état non valide

    input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input

    background-color: #FF9F9F;

    Couleur d’arrière-plan du widget actif

    .textfieldFocusState input, input.textfieldFocusState

    background-color: #FFFFCC;

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne