234 votes

À l’aide de l’attribut « required » HTML5 pour un groupe de cases à cocher ?

Lors de l'utilisation de la plus récente des navigateurs qui supportent HTML5 (FireFox 4 par exemple);
et un champ de formulaire a l'attribut required='required';
et le champ du formulaire est vide/vide;
et de le soumettre sur le bouton;
le navigateur détecte que le "nécessaire" le champ est vide et ne pas soumettre le formulaire;
au lieu navigateur affiche un indice de demander à l'utilisateur de taper un texte dans le champ.

Maintenant, au lieu d'un seul champ de texte, j'ai un groupe de cases à cocher, dont au moins un doit être vérifié/sélectionné par l'utilisateur.

Comment puis-je utiliser le HTML5 required attribut sur ce groupe de cases à cocher? (Depuis seulement l'une des cases doit être vérifié, je ne peut pas mettre la required d'attribut sur chaque case)

ps. Je suis à l'aide de simple_form, si ce qui compte.


Mise à JOUR

Pourrait le HTML 5 multiple attribut être utile ici? A quiconque de l'utiliser avant de faire quelque chose de similaire à ma question?

Mise à JOUR

Il semble que cette fonctionnalité n'est pas pris en charge par la spec HTML5: QUESTION-111: Ce n'input.@required signifie pour @type = checkbox?

(État du problème: la Question a été marquée fermé sans préjudice.) Et voici l'explication.

12voto

Tyler Rick Points 3033

Je suppose qu'il n'y a pas de norme HTML5 façon de le faire, mais si vous n'avez pas l'esprit à l'aide d'une bibliothèque de jQuery, j'ai été en mesure de parvenir à un "groupe de cases à cocher" validation à l'aide de webshims' "groupe-requis" fonctionnalité de validation:

Les docs pour le groupe-requis dire:

Si une case à cocher a la classe 'groupe-requis" au moins un des les cases à cocher avec le même nom à l'intérieur de la forme/document doit être cochée.

Et voici un exemple de la façon dont vous l'utiliser:

<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />

J'utilise principalement la webshims de polyfill de fonctionnalités de HTML5, mais il a aussi quelques bons extensions facultatives comme celui-ci.

Il vous permet même de créer vos propres règles de validité. Par exemple, j'avais besoin de créer un groupe de cases à cocher qui n'était pas basée sur la saisie du nom, j'ai donc écrit ma propre règle de validité pour que...

-1voto

james.garriss Points 3647

Edit: la réponse est maintenant OBE et doit être ignorée.

Bien que Hixie de mots dans ce rapport de bug semble assez clair, je pense que la fonctionnalité est réellement pris en charge, et voici pourquoi. Rendez-vous ici:

http://dev.w3.org/html5/spec/Overview.html#the-input-element

Faites défiler vers le bas jusqu'à ce que vous voyez la grande table étiquetés "attributs de Contenu," l'un avec tous les surbrillance jaune. Correspondre à la ligne "nécessaire" à la colonne "Case à cocher, Bouton Radio." La valeur est "Oui". Si je suis en train de lire ce tableau de droite, cela signifie que le nécessaire attribué est pris en charge pour les cases à cocher.

Edit: Bien que cette fonctionnalité ne fonctionne pas avec des cases à cocher, il ne fonctionne pas avec des boutons radio, comme le code suivant illustre. Évidemment, la fonctionnalité n'est pas ce que l'OP a désiré, mais peut-être que cela sera utile à certains.

Essayez ce morceau de code sur 5 FF ou Chrome 12 (sur Win7). Vous trouverez que les deux support de l'attribut requis comme vous pouvez attendre:

<!DOCTYPE html>
<html>
    <body>
        <form id="processForm.php" action="post">
            <label>Please select the gender of your pet:</label>
            <input type="radio" name="gender" value="male" required>Male</input>
            <input type="radio" name="gender" value="female">Female</input>
            <input type="radio" name="gender" value="unknown">Unknown</input>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X