Choisissez Insertion > Spry > Validation de groupe de boutons radio Spry.
Dernière mise à jour le
May 01, 2021 06:46:50 PM GMT
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 groupe de boutons radio
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 valide
Lorsque l’utilisateur effectue une sélection, ce qui permet l’envoi du formulaire.
Etat obligatoire
Lorsque l’utilisateur n’a pas effectué une sélection obligatoire.
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.
Insertion et modification du widget Validation de groupe de boutons radio
Insertion du widget Validation de groupe de boutons radio
-
-
Dans la zone de texte Nom, entrez le nom du groupe de boutons radio.
-
Ajoutez ou retirez des boutons radio du groupe en cliquant sur les boutons Plus (+) ou Moins (-).
-
Dans la colonne Etiquette, cliquez sur le nom de chaque bouton radio pour rendre le champ modifiable, puis attribuez des noms uniques à chacun d’entre eux.
-
Dans la colonne Valeur, cliquez sur chaque valeur pour rendre le champ modifiable, puis attribuez une valeur unique à chaque bouton radio.
-
(Facultatif) Cliquez sur un bouton radio ou sur sa valeur pour sélectionner une ligne spécifique, puis sur les flèches pointant vers le haut et vers le bas pour déplacer la ligne vers le haut ou vers le bas.
-
Sélectionnez un type de mise en forme pour le groupe de boutons radio.
Sauts de ligne
Place chaque bouton radio sur une ligne séparée à l’aide de sauts de ligne (balises br).
Tableau
Place chaque bouton radio sur une ligne séparée à l’aide de lignes de tableau individuelles (balises tr).
-
Cliquez sur OK.
Remarque :
Vous pouvez également insérer un widget Groupe de boutons radio 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.
-
Sélectionnez un widget Validation de groupe de boutons radio 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 groupe de boutons radio.
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
-
Sélectionnez un widget Validation de groupe de boutons radio 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, sélectionnez Initial pour afficher le widget dans son état initial.
Modification de l’état obligatoire des boutons radio
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.
-
Sélectionnez un widget Validation de groupe de boutons radio dans la fenêtre de document en cliquant sur son onglet bleu.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), désactivez l’option Obligatoire.
Spécification d’une valeur vide ou non valide
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 votre widget Groupe de boutons radio, sélectionnez le bouton radio à utiliser pour le bouton radio vide ou non valide. Lorsque vous spécifiez des valeurs vides ou non valides pour le widget, des boutons radio doivent correspondre aux valeurs déjà attribuées.
-
Dans l’inspecteur Propriétés du bouton radio (Fenêtre > Propriétés), attribuez une valeur au bouton radio. Pour créer un bouton radio dont la valeur est vide, tapez aucune dans la zone Valeur. Pour créer un bouton radio dont la valeur est non valide, tapez non valide dans la zone Valeur.
-
Sélectionnez le widget Validation de groupe de boutons radio entier en cliquant sur son onglet bleu.
-
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.
N’oubliez pas que les valeurs aucune ou non valide doivent être attribuées au bouton radio et au widget Groupe de boutons radio pour que les messages d’erreur puissent s’afficher correctement.
Personnalisation du widget Validation de groupe de boutons radio
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.
Définition du style du widget Validation de groupe de boutons radio (instructions générales)
-
Ouvrez le fichier SpryValidationRadio.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 Groupe de boutons radio, modifiez la règle radioRequiredState dans le fichier SpryValidationRadio.css.
-
Apportez les modifications désirées à la règle CSS puis enregistrez le fichier.
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.
Définition du style du texte de message d’erreur d’un widget Validation de groupe de boutons radio
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;
Autres ressources similaires
Accéder à votre compte