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 :

Champ Mot de passe
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

  1. Choisissez Insertion > Spry > Validation de confirmation Spry.
  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 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.

  1. Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
  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.

Spécification du champ de texte à utiliser pour la validation

  1. Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
  2. 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

  1. Sélectionnez un widget Validation de confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
  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.

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 confirmation dans la fenêtre de document en cliquant sur son onglet bleu.
  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 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)

  1. Ouvrez le fichier SpryValidationConfirm.css.

  2. 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.

  3. 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.

  1. 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

  1. 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;

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