Choisissez Insertion > Spry > Validation de confirmation Spry.
Dernière mise à jour le
2 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 confirmation
Le widget Validation de confirmation est un champ de texte ou un champ de formulaire de mot de passe qui affiche des états valides ou non valides lorsqu’un utilisateur entre une valeur ne correspondant pas à celle d’un champ similaire du même formulaire. Par exemple, vous pouvez ajouter un widget Validation de confirmation à un formulaire qui oblige un utilisateur à ressaisir le mot de passe qu’il a spécifié dans un champ précédent. Si l’utilisateur ne parvient pas saisir le mot de passe exactement comme il l’a spécifié auparavant, le widget renvoie un message d’erreur indiquant que les valeurs ne correspondent pas.
Vous pouvez également utiliser un widget Validation de confirmation en combinaison avec un widget Validation de mot de passe afin de valider les adresses e-mail.
Remarque :
Vous devez vous être familiarisé avec les widgets de validation Spry avant de pouvoir utiliser le widget Confirmation. S’ils ne vous sont pas familiers, consultez la rubrique Utilisation du widget Validation de zone de texte Spry ou toute autre présentation du widget de validation avant de commencer. Cette présentation n’aborde pas tous les concepts du widget de validation de base.
L’illustration ci-dessous montre une configuration type d’un widget Confirmation :
A. Champ de mot de passe ou widget Validation de mot de passe Spry B. Widget Confirmation
Le widget Validation de confirmation peut posséder divers états (par exemple valide, non valide, obligatoire, etc.). Vous pouvez modifier les propriétés de ces états en modifiant le fichier CSS correspondant (SpryValidationConfirm.css), en fonction des résultats de validation désirés. Un widget Validation de confirmation 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
Lorsque la page se charge dans le navigateur, ou lorsque l’utilisateur réinitialise le formulaire.
Etat actif
Lorsque l’utilisateur place le point d’insertion à l’intérieur du widget.
Etat valide
Lorsque l’utilisateur a entré des informations correctes, ce qui permet l’envoi du formulaire.
Etat non valide
Lorsqu’un utilisateur entre du texte qui ne correspond pas à celui entré dans une zone de texte précédente, un widget Validation de zone de texte ou un widget Validation de mot de passe.
Etat obligatoire
Lorsque l’utilisateur n’a pas entré du texte obligatoire dans le champ de texte.
Vous trouverez une explication plus détaillée du fonctionnement des widgets Validation de confirmation, ainsi que des informations supplémentaires sur la structure du widget, à l’adresse www.adobe.com/go/learn_dw_spryconfirm_fr.
Insertion et modification du widget Validation de confirmation
Insertion du widget Validation de confirmation
-
-
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 confirmation par l’intermédiaire de la catégorie Spry du panneau Insertion.
Modification de l’état obligatoire d’un widget Validation de confirmation
Par défaut, tous les widgets Validation de confirmation 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 de confirmation dans certaines zones facultative pour l’utilisateur.
-
Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
-
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.
Spécification du champ de texte à utiliser pour la validation
-
Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le champ de texte à utiliser pour la validation dans le menu déroulant Utiliser pour la validation. Tous les champs de texte possédant des ID uniques apparaissent en tant qu’options dans le menu déroulant.
Affichage des états du widget en mode Création
-
Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
-
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.
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 confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
-
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 du champ de texte de confirmation.
Remplacer
Validation lorsque l’utilisateur modifie du texte à l’intérieur du champ de texte de confirmation.
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.
Personnalisation du widget Validation de confirmation
Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Validation de confirmation, 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 confirmation 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_spryconfirm_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 SpryValidationConfirm.css. Dreamweaver enregistre le fichier SpryValidationConfirm.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de confirmation Spry. 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 confirmation 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 widget Validation de confirmation (instructions générales)
-
Ouvrez le fichier SpryValidationConfirm.css.
-
Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d’arrière-plan de l’état obligatoire du widget Confirmation, modifiez la règle input.confirmRequiredState dans le fichier SpryValidationConfirm.css.
-
Apportez les modifications désirées au code CSS, puis enregistrez le fichier.
Le fichier SpryValidationConfirm.css contient de nombreux commentaires qui expliquent le code et le rôle de certaines règles. Pour plus d’informations, consultez les commentaires dans le fichier.
Définition du style du texte de message d’erreur d’un widget Validation de confirmation
Par défaut, les messages d’erreur du widget Validation de confirmation s’affichent en rouge, entourés d’un bord plein de 1 pixel d’épaisseur.
-
Pour modifier le style des messages d’erreur d’un widget Validation de confirmation, 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
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Modification des couleurs d’arrière-plan du widget Validation de confirmation
-
Pour modifier les couleurs d’arrière-plan du widget Validation de confirmation 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
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
Couleur d’arrière-plan du widget dans un état non valide
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
Couleur d’arrière-plan du widget actif
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
Autres ressources similaires
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?