Choisissez Insertion > Spry > Validation Spry de champ de texte.
Dernière mise à jour le
1 mai 2021
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 :
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
-
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), choisissez un type de validation dans le menu déroulant Type.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.
-
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.
-
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
-
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;
