La configuration et la validation de boutons radio semble être le champ de formulaire cela donne à de nombreux webmasters la plus grande difficulté à mettre en place. En fait, la configuration de ces champs est la plus simple de toutes les zones de formulaire à valider car les boutons radio définissent une valeur qui ne doit être testée que lorsque le formulaire est soumis.
La difficulté des boutons radio est qu'il y a au moins deux et généralement plus de champs qui doivent être placés sur le formulaire, reliés ensemble et testés en un seul groupe. À condition que vous utilisiez les conventions de dénomination et la disposition correctes pour vos boutons, vous n'aurez aucun problème.
Configurer le groupe de boutons radio
La première chose à considérer lors de l'utilisation des boutons radio sur notre formulaire est de savoir comment les boutons doivent être codés pour qu'ils fonctionnent correctement comme boutons radio. Le comportement souhaité que nous voulons est d'avoir un seul bouton sélectionné à la fois; lorsqu'un bouton est sélectionné, tout bouton précédemment sélectionné sera automatiquement désélectionné.
La solution ici est de donner à tous les boutons radio du groupe le même nom mais des valeurs différentes. Voici le code utilisé pour le bouton radio lui-même.
La création de plusieurs groupes de boutons radio pour le même formulaire est également simple. Il vous suffit de fournir au second groupe de boutons radio un nom différent de celui utilisé pour le premier groupe.
Le champ de nom détermine à quel groupe appartient un bouton particulier. La valeur qui sera transmise pour un groupe spécifique lorsque le formulaire est soumis sera la valeur du bouton dans le groupe qui est sélectionné au moment où le formulaire est soumis.
Décrivez chaque bouton
Pour que la personne remplissant le formulaire comprenne ce que fait chaque bouton radio de notre groupe, nous devons fournir des descriptions pour chaque bouton. La façon la plus simple de procéder consiste à fournir une description sous forme de texte immédiatement après le bouton.
Cependant, il y a quelques problèmes avec l'utilisation de texte brut:
- Le texte peut être visuellement associé au bouton radio, mais il peut ne pas être clair pour certains qui utilisent des lecteurs d'écran, par exemple.
- Dans la plupart Les interfaces des utilisateurs à l'aide des boutons radio, le texte associé au bouton est cliquable et peut sélectionner son bouton radio associé. Dans notre cas ici, le texte ne fonctionnera pas de cette manière à moins qu'il ne soit spécifiquement associé au bouton.
Association de texte à un bouton radio
Pour associer le texte à son bouton radio correspondant afin que cliquer sur le texte sélectionne ce bouton, nous devons faire un ajout supplémentaire au code de chaque bouton en entourant le bouton entier et son texte associé dans un étiquette.
Voici à quoi ressemblerait le code HTML complet de l'un des boutons:
En tant que bouton radio avec le nom d'ID mentionné dans le pour paramètre de la balise d'étiquette est réellement contenu dans la balise elle-même, la pour et id les paramètres sont redondants dans certains navigateurs. Cependant, leurs navigateurs ne sont souvent pas assez intelligents pour reconnaître l'imbrication, il vaut donc la peine de les installer pour maximiser le nombre de navigateurs dans lesquels le code fonctionnera.
Cela termine le codage des boutons radio eux-mêmes. La dernière étape consiste à configurer la validation des boutons radio à l'aide de Javascript.
Configuration de la validation des boutons radio
La validation de groupes de boutons radio n'est peut-être pas évidente, mais elle est simple une fois que vous savez comment.
La fonction suivante validera que l'un des boutons radio d'un groupe a été sélectionné:
// Validation des boutons radio
// copyright Stephen Chapman, 15 nov 2004, 14 sept 2005
// vous pouvez copier cette fonction mais veuillez garder la notice de copyright avec elle
function valButton (btn) {
var cnt = -1;
pour (var i = btn.length-1; i> -1; je--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) return btn [cnt] .value;
sinon retourne null;
}
Pour utiliser la fonction ci-dessus, appelez-la depuis votre routine de validation de formulaire et passez-lui le nom du groupe de boutons radio. Il renverra la valeur du bouton dans le groupe sélectionné ou renverra une valeur nulle si aucun bouton du groupe n'est sélectionné.
Par exemple, voici le code qui effectuera la validation du bouton radio:
var btn = valButton (form.group1);
if (btn == null) alert ('Aucun bouton radio sélectionné');
else alert ('Valeur du bouton' + btn + 'sélectionné');
Ce code a été inclus dans la fonction appelée par un sur clic événement attaché au bouton valider (ou soumettre) du formulaire.
Une référence à l'ensemble du formulaire a été passée en tant que paramètre dans la fonction, qui utilise l'argument "form" pour faire référence au formulaire complet. Pour valider le groupe de boutons radio avec le nom group1, nous passons donc form.group1 à la fonction valButton.
Tous les groupes de boutons radio dont vous aurez besoin peuvent être gérés en utilisant les étapes décrites ci-dessus.