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.
Le widget Validation de groupe de boutons radio est un groupe de boutons radio intégrant la prise en charge de la validation de la sélection. Le widget applique la sélection d’un bouton radio dans le groupe.
L’exemple suivant montre un widget Validation de groupe de boutons radio dans différents états.
A. Messages d’erreur du widget Validation de groupe de boutons radio B. Groupe de widgets Validation de groupe de boutons radio
Outre l’état initial, le widget Validation de groupe de boutons radio peut posséder trois états : valide, non valide et valeur obligatoire. Vous pouvez modifier les propriétés de ces états en modifiant le fichier CSS correspondant (SpryValidationRadio.css), en fonction des résultats de validation désirés. Un widget Validation de groupe de boutons radio peut effectuer une validation à différents moments : 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
Lorsque la page se charge dans le navigateur, ou lorsque l’utilisateur réinitialise le formulaire.
Etat non valide
Lorsque l’utilisateur sélectionne un bouton radio dont la valeur n’est pas acceptable.
Lorsqu’un widget Validation de groupe de boutons radio 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 qui accompagne le widget, SpryValidationRadio.css.
Le code HTML par défaut du widget Validation de groupe de boutons radio, généralement dans un formulaire, contient une balise conteneur span qui entoure la balise input type="radio" du groupe de boutons radio. Le code HTML du widget Validation de groupe de boutons radio comprend également des balises script dans l’en-tête du document et après le code HTML du widget.
Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de groupe de boutons radio, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_spryradio_fr.
Remarque :
Vous pouvez également insérer un widget Groupe de boutons radio par l’intermédiaire de la catégorie Spry du panneau Insertion.
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.
Par défaut, les widgets Validation de groupe de boutons radio exigent que l’utilisateur effectue une sélection avant d’envoyer le formulaire. Vous pouvez toutefois stipuler que certaines sélections sont facultatives pour l’utilisateur.
Vous pouvez définir une valeur qui est considérée comme vide ou non valide si l’utilisateur sélectionne un bouton radio associé à l’une de ces valeurs. Si l’utilisateur sélectionne un bouton radio dont la valeur est vide, le navigateur renvoie le message d’erreur « Vous devez effectuer une sélection ». Si l’utilisateur sélectionne un bouton radio dont la valeur est non valide, le navigateur renvoie le message d’erreur « Vous devez sélectionner une valeur valide ».
-
Dans l’inspecteur Propriétés, spécifiez des valeurs vides ou non valides. Pour créer un widget affichant le message d’erreur de valeur vide « Vous devez effectuer une sélection », tapez aucune dans la zone Valeur vide. Pour créer un widget affichant le message d’erreur de valeur non valide « Vous devez sélectionner une valeur valide », tapez non valide dans la zone Valeur non valide.
Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Validation de groupe de boutons radio, 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 groupe de boutons radio 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_spryradio_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 SpryValidationRadio.css. Dreamweaver enregistre le fichier SpryValidationRadio.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de groupe de boutons radio 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 groupe de boutons radio 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.
Le fichier SpryValidationRadio.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.
Par défaut, les messages d’erreur du widget Validation de groupe de boutons radio 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 groupe de boutons radio, 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
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.