web-dev-qa-db-fra.com

Vous utilisez l'attribut HTML5 "requis" pour un groupe de cases à cocher?

Lorsque vous utilisez les nouveaux navigateurs prenant en charge HTML5 (FireFox 4 par exemple);
et un champ de formulaire a pour attribut required='required';
et le champ de formulaire est vide/vide;
et le bouton de soumission est cliqué;
les navigateurs détectent que le champ "obligatoire" est vide et ne soumettent pas le formulaire;
à la place, le navigateur affiche un indice demandant à l'utilisateur de saisir du texte dans le champ.

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

Comment utiliser l'attribut HTML5 required sur ce groupe de cases à cocher? (Puisqu'une seule des cases à cocher doit être cochée, je ne peux pas mettre l'attribut required sur chaque case à cocher)

ps. J'utilise simple_form , si cela compte.

UPDATE

L'attribut HTML 5 multiple pourrait-il être utile ici? Quelqu'un l'a-t-il déjà utilisé pour faire quelque chose de similaire à ma question?

MISE À JOUR

Il indique que cette fonctionnalité n'est pas prise en charge par la spécification HTML5: NUMÉRO-111 : Que signifie entrée. @ Requis signifie pour @type = case à cocher?

(Statut de la question: La question a été marquée comme fermée sans préjudice. ) Et voici l'explication .

MISE À JOUR 2

C'est une vieille question, mais je voulais préciser que l'objectif initial de la question était de pouvoir faire ce qui précède sans utiliser Javascript - c'est-à-dire en utilisant un moyen de le faire en HTML5. Rétrospectivement, j'aurais dû rendre le "sans Javascript" plus évident.

formshtml5validationcheckbox
147
Zabba

Malheureusement, HTML5 ne fournit pas un moyen prêt à l'emploi de le faire.

Cependant, en utilisant jQuery, vous pouvez facilement contrôler si un groupe de cases à cocher a au moins un élément vérifié.

Considérez l'extrait de DOM suivant:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

Vous pouvez utiliser cette expression:

$('div.checkbox-group.required :checkbox:checked').length > 0

qui retourne true si au moins un élément est coché. Sur cette base, vous pouvez implémenter votre contrôle de validation.

66
Luca Fagioli

C'est un truc simple. C'est un code jQuery qui peut exploiter la validation html5 en modifiant les propriétés required si l'une d'entre elles est cochée. Voici votre code html (assurez-vous d’ajouter les éléments requis pour tous les éléments du groupe.)

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

Voici le script jQuery, qui désactive toute vérification de validation supplémentaire si l'un d'entre eux est sélectionné. Sélectionnez en utilisant l'élément name.

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

Petit casse-tête ici: puisque vous utilisez la validation html5, assurez-vous de l'exécuter avant la validation, c'est-à-dire avant la soumission du formulaire.

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});
13
thegauraw

Je suppose qu'il n'y a pas de méthode HTML5 standard pour le faire, mais si cela ne vous dérange pas d'utiliser une bibliothèque jQuery, j'ai été capable de réaliser une validation de "groupe de cases à cocher" en utilisant webshims '" requis pour le groupe "fonctionnalité de validation:

Le docs for group-required dit:

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

Et voici un exemple d'utilisation:

<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 webshims pour polyfiller les fonctionnalités HTML5, mais il possède également d'excellentes extensions facultatives comme celle-ci.

Il vous permet même d’écrire vos propres règles de validité personnalisées. Par exemple, je devais créer un groupe de cases à cocher qui n'était pas basé sur le nom de l'entrée. J'ai donc écrit ma propre règle de validité pour cela ...

11
Tyler Rick

HTML5 ne prend pas directement en charge la nécessité de cocher une ou plusieurs cases dans un groupe de cases à cocher. Voici ma solution en utilisant Javascript:

HTML

<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two

JAVASCRIPT

       function deRequireCb(elClass) {
            el=document.getElementsByClassName(elClass);

            var atLeastOneChecked=false;//at least one cb is checked
            for (i=0; i<el.length; i++) {
                if (el[i].checked === true) {
                    atLeastOneChecked=true;
                }
            }

            if (atLeastOneChecked === true) {
                for (i=0; i<el.length; i++) {
                    el[i].required = false;
                }
            } else {
                for (i=0; i<el.length; i++) {
                    el[i].required = true;
                }
            }
        }

Le javascript s'assurera qu'au moins une case est cochée, puis supprime le besoin du groupe de cases à cocher complet. Si la case à cocher qui est cochée devient non cochée, alors il faudra toutes les cases à cocher, encore!

7
Brian Woodward

J'ai eu le même problème et ma solution était la suivante:

HTML:

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>

      <input id='submit' type="submit" value="Submit">
  </div>
</form>

JS:

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/

3
Passalini

Inspiré par les réponses de @thegauraw et @Brian Woodward, voici un extrait que j'ai rassemblé pour les utilisateurs de JQuery, y compris un message d'erreur de validation personnalisé:

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
    if ($cbx_group.is(":checked")) {
        // checkboxes become unrequired as long as one is checked
        $cbx_group.prop("required", false).each(function() {
            this.setCustomValidity("");
        });
    } else {
        // require checkboxes and set custom validation error message
        $cbx_group.prop("required", true).each(function() {
            this.setCustomValidity("Please select at least one checkbox.");
        });
    }
});

Notez que certaines formes sont cochées dans mon formulaire par défaut.

Peut-être que certains d'entre vous, les magiciens JavaScript/JQuery, pourraient resserrer encore plus la tâche?

2
ewall

nous pouvons le faire facilement avec html5 également, il suffit d’ajouter du code jquery

Démo

HTML

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

Jquery 

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});
1
Juned Ansari

Bonjour, utilisez simplement une zone de texte en plus du groupe de cases à cocher. Lorsque vous cliquez sur une case à cocher, entrez les valeurs dans cette zone de texte. Assurez-vous que cette zone de texte est requise et en lecture seule.

1
Abijith

J'ai ajouté une radio invisible à un groupe de cases à cocher. Lorsqu'au moins une option est cochée, la radio est également configurée pour vérifier. Lorsque toutes les options sont annulées, la radio est également configurée pour annuler. Par conséquent, le formulaire utilise l'invite de la radio "Veuillez cocher au moins une option".

  • Vous ne pouvez pas utiliser display: none car la radio ne peut pas être focalisée.
  • Je fais la taille de la radio égale à la taille des cases à cocher, donc c'est plus évident quand on le demande.

HTML

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

Javascript 

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

CSS

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/

0
Codus