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 la sélection

Un widget Validation de la sélection Spry est un menu déroulant qui affiche des états valides ou non valides lorsque l’utilisateur effectue une sélection. Par exemple, vous pouvez insérer un widget Validation de la sélection contenant une liste d’états, regroupés en différentes sections et séparés par des lignes horizontales. Si l’utilisateur sélectionne par erreur l’une des lignes de séparation au lieu d’un des états, le widget Validation de la sélection affiche un message pour indiquer que la sélection n’est pas valide.

L’exemple suivant montre un widget Validation de la sélection développé, ainsi que la forme réduite de ce widget dans divers états :

Widget Validation de la sélection
Widget Validation de la sélection

A. Widget Validation de la sélection activé B. Widget Validation de la sélection, état valide C. Widget Validation de la sélection, état obligatoire D. Widget Validation de la sélection, état non valide 

Le widget Validation de la sélection 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 sélection peut effectuer une validation à différents moments, par exemple lorsque l’utilisateur 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 actif

Etat du widget lorsque l’utilisateur clique dessus.

Etat valide

Etat du widget lorsque l’utilisateur a sélectionné un élément valide, ce qui permet l’envoi du formulaire.

Etat non valide

Etat du widget si l’utilisateur a sélectionné un élément non valide.

Etat obligatoire

Etat du widget si l’utilisateur n’a pas sélectionné d’élément valide.

Lorsqu’un widget Validation de la sélection 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 sélectionné d’élément dans le menu, Spry applique au widget une classe qui le force à afficher le message d’erreur « Vous devez sélectionner un élément ». 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, SpryValidationSelect.css.

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

Insertion et modification du widget Validation de la sélection

Insertion du widget Validation de la sélection

  1. Choisissez Insertion > Spry > Validation de sélection Spry.
  2. Complétez la boîte de dialogue Attributs d’accessibilité à des balises objet, puis cliquez sur OK.
  3. En mode Code, ajoutez des balises d’option contenant des éléments de menu et des valeurs. Dreamweaver ne s’en charge pas automatiquement. Pour plus d’informations, consultez la rubrique ci-dessus.

Remarque :

Vous pouvez également insérer un widget Validation de la sélection 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 tape des données ou lorsqu’il tente d’envoyer le formulaire.

  1. Sélectionnez un widget Validation de la sélection 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 du widget.

    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.

Affichage des états du widget en mode Création

  1. Sélectionnez un widget Validation de la sélection 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, si vous voulez afficher le widget dans son état valide, sélectionnez Valide.

Interdiction ou autorisation de valeurs vides

Par défaut, tous les widgets Validation de sélection que vous insérez à l’aide de Dreamweaver exigent que l’utilisateur sélectionne des éléments de menu possédant une valeur associée lorsque le widget et publié sur une page web. Vous pouvez toutefois désactiver cette option.

  1. Sélectionnez un widget Validation de la sélection dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l’option Ne pas autoriser Valeur vide, en fonction de vos préférences.

Spécification d’une valeur incorrecte

Vous pouvez définir une valeur qui est considérée comme non valide si l’utilisateur sélectionne un élément de menu associé à cette valeur. Par exemple, si vous définissez -1 comme valeur non valide et si vous l’attribuez à une balise d’option, le widget affiche un message d’erreur si l’utilisateur sélectionne cet élément de menu.

<option value="-1"> ------------------- </option>
  1. Sélectionnez un widget Validation de la sélection dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés du calque (Fenêtre > Propriétés), entrez un nombre à utiliser comme valeur non valide dans la zone Valeur non valide.

Personnalisation du widget Validation de la sélection

Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Validation de la sélection, 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 la sélection de manière à créer un widget dont le style est adapté à vos besoins.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de la sélection. 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 la sélection 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 la sélection

Par défaut, les messages d’erreur du widget Validation de la sélection s’affichent en rouge, entourés d’un bord épais de 1 pixel.

  1. Pour modifier le style des messages d’erreur d’un widget Validation de sélection, 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

    .selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg

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

Modification des couleurs d’arrière-plan du widget Validation de la sélection

  1. Pour modifier les couleurs d’arrière-plan du widget Validation de la sélection 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

    .selectValidState select, select.selectValidState

    background-color: #B8F5B1;

    Couleur d’arrière-plan du widget dans un état non valide

    select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select

    background-color: #FF9F9F;

    Couleur d’arrière-plan du widget actif

    .selectFocusState select, select.selectFocusState

    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