Utilisation du widget Validation Spry de zone de texte sous Dreamweaver

Rechercher
Adobe Dreamweaver Guide d'utilisation

Sur cette page

S’applique à : Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 Zone de texte de validation

Le widget Validation Spry de zone de texte est une zone de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre quelques lignes de texte. Si la zone de texte est un champ obligatoire et que l’utilisateur n’y entre pas de texte, le widget affiche un message indiquant qu’une valeur est requise.

L’exemple suivant montre un widget Zone de texte de validation dans différents états :

Un widget Validation Spry de zone de texte dans différents états
Un widget Validation Spry de zone de texte dans différents états

A. Compteur de caractères restants B. Widget Zone de texte activé, nombre maximal de caractères C. Widget Zone de texte activé, état valide D. Widget Zone de texte, état obligatoire E. Compteur de caractères tapés 

Le widget Zone de texte de validation 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 Zone de texte de validation 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 obligatoire

Etat du widget si l’utilisateur n’a pas entré 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 la zone 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 la zone de texte.

Lorsqu’un widget Zone de texte de validation 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 la zone de texte, 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, SpryValidationTextArea.css.

Le code HTML par défaut du widget Zone de texte de validation, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <textarea> de la zone de texte. Le code HTML du widget Zone de texte de validation 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 Zone de texte de validation, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_sprytextarea_fr.

Insertion et modification du widget Zone de texte de validation

Insertion du widget Zone de texte de validation

  1. Choisissez Insertion > Spry > Validation Spry de zone 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 Zone de texte de validation par l’intermédiaire de la catégorie Spry du panneau Insertion.

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 Zone de texte de validation dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l’option Valider si 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

  1. Sélectionnez un widget Zone de texte de validation 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 20 dans la zone Nbre min. de caract., le widget n’effectue la validation que si l’utilisateur entre au moins 20 caractères dans la zone de texte.

Ajout d’un compteur de caractères

Vous pouvez ajouter un compteur de caractères qui indique à l’utilisateur combien de caractères il a tapé ou combien il lui reste de caractères lorsqu’il entre du texte dans la zone de texte. Par défaut, lorsque vous ajoutez un compteur de caractères, il s’affiche à l’extérieur du widget, près de son coin inférieur droit.

  1. Sélectionnez un widget Zone de texte de validation dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez l’option Nombre caract. ou Car. restants.

    Remarque :

    L’option Car. restants n’est disponible que si vous avez déjà fixe un nombre maximal de caractères autorisés.

Affichage des états du widget en mode Création

  1. Sélectionnez un widget Zone de texte de validation 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 Zone de texte de validation 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 stipuler que certaines zones de texte sont facultatives pour la validation.

  1. Sélectionnez un widget Zone de texte de validation 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

Vous pouvez ajouter un conseil pour une zone de texte (par exemple « Entrez votre description ici ») pour indiquer aux utilisateurs le type d’informations qu’ils doivent y entrer. La zone de texte affiche le conseil lorsque l’utilisateur charge la page dans un navigateur.

  1. Sélectionnez un widget Zone de texte de validation 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 supplémentaires

Vous pouvez empêcher les utilisateurs d’entrer davantage de caractères que le nombre maximal admis dans un widget Zone de texte de validation. Par exemple, si vous activez cette option pour un widget configuré de manière à ne pas accepter plus de 20 caractères, l’utilisateur ne pourra pas entrer plus de 20 caractères dans la zone de texte.

  1. Sélectionnez un widget Zone de texte de validation dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez l’option Bloquer les caractères supplémentaires.

Personnalisation du widget Zone de texte de validation

Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Zone de texte de validation, 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 Zone de texte de validation 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_sprytextarea_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 SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site dès que vous créez un widget Zone de texte de validation. 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 Zone de texte de validation 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 Zone de texte de validation

Par défaut, les messages d’erreur du widget Zone de texte de validation 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 Zone 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

    		 .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

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

Modification des couleurs d’arrière-plan du widget Zone de texte de validation

  1. Pour modifier les couleurs d’arrière-plan du widget Zone de texte de validation 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 d’arrière-plan à modifier

    Règle CSS pertinente

    Propriété à modifier

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

    		 .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;

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

    		 textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

    background-color: #FF9F9F;

    Couleur d’arrière-plan du widget actif

    		 .textareaFocusState textarea, textarea.textareaFocusState

    background-color: #FFFFCC;