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 case à cocher

Le widget Validation de case à cocher Spry est une case à cocher ou un groupe de cases à cocher, dans un formulaire HTML, qui affiche des états valides ou non valide lorsque l’utilisateur active ou n’active pas une case à cocher. Par exemple, vous pouvez ajouter un widget Validation de case à cocher à un formulaire dans lequel l’utilisateur doit effectuer trois sélections. Si l’utilisateur n’effectue pas ces trois sélections, le widget renvoie un message indiquant que le nombre minimal de sélections n’a pas été effectué.

L’exemple suivant montre un widget Validation de case à cocher dans différents états :

Le widget Validation de case à cocher dans différents états
Le widget Validation de case à cocher dans différents états

A. Groupe de widgets Validation de case à cocher, nombre minimal de sélections B. Widget Validation de case à cocher, état obligatoire 

Le widget Validation de case à cocher 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 case à cocher peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu’il effectue une sélection 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 effectué une sélection ou le nombre correct de sélections, ce qui permet l’envoi du formulaire.

Etat obligatoire

Etat du widget si l’utilisateur n’a pas effectué une sélection obligatoire.

Nombre minimal de sélections

Etat du widget lorsque l’utilisateur a sélectionné moins de cases à cocher que le nombre minimal requis.

Nombre maximal de sélections

Etat du widget lorsque l’utilisateur a sélectionné plus de cases à cocher que le nombre maximal admis.

Lorsqu’un widget Validation de case à cocher 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 effectué de sélections, Spry applique au widget une classe qui le force à afficher le message d’erreur « Vous devez effectuer une sélection ». 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, SpryValidationCheckbox.css.

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

Insertion et modification du widget Validation de case à cocher

Insertion du widget Validation de case à cocher

  1. Choisissez Insertion > Spry > Validation de case à cocher 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 case à cocher 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 effectue des sélections ou lorsqu’il tente d’envoyer le formulaire.

  1. Sélectionnez un widget Validation de case à cocher dans la fenêtre de document.
  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 de la case à cocher.

    Remplacer

    Validation lorsque l’utilisateur effectue des sélections.

    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’une plage de sélections minimale et maximale

Par défaut, un widget Validation de case à cocher est obligatoire. Si vous insérez plusieurs cases à cocher sur la page, il est toutefois possible de spécifier une plage de sélections minimale et maximale. Par exemple, si la balise <span> d’un widget Validation de case à cocher contient six cases à cocher et si vous voulez que l’utilisateur en sélectionne au moins trois, vous pouvez définir une préférence de ce type pour le widget entier.

  1. Sélectionnez un widget Validation de case à cocher dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez l’option Imposer plage.
  3. Entrez un nombre minimal ou maximal (voire les deux) de cases à cocher que l’utilisateur doit activer.

Affichage des états du widget en mode Création

  1. Sélectionnez un widget Validation de case à cocher 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, sélectionnez Initial pour afficher le widget dans son état initial.

Personnalisation des messages d’erreur d’un widget Validation de case à cocher

Par défaut, les messages d’erreur du widget Validation de case à cocher s’affichent en rouge, entourés d’un bord épais de 1 pixel. Vous pouvez modifier les règles CSS du widget Validation de case à cocher 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_sprycheckbox_custom_fr.

  1. Ouvrez le fichier SpryValidationCheckbox.css.

    Dreamweaver enregistre le fichier SpryValidationCheckbox.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de case à cocher. 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.

  2. 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 à mettre en forme

    Règle CSS pertinente

    Propriétés à modifier

    Texte de message d’erreur

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

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

    Remarque :

    Même s’il est facile de modifier directement les règles du widget Validation de case à cocher 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.

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