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.
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 :
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 valide
Etat du widget lorsque l’utilisateur a entré des informations correctes, ce qui permet l’envoi du formulaire.
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.
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.
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.
-
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.
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.
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.
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.
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.
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.
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.
-
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;
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.