Erforderliches Attribut für mehrere Kontrollkästchen mit demselben Namen?

Question

Ich habe eine Liste von Kontrollkästchen mit demselben Namen Attribut, und ich muss überprüfen, ob mindestens eine davon ausgewählt wurde.

Aber wenn ich das html5-Attribut "required" für alle von ihnen verwende, erlaubt mir der Browser (Chrome & ff) nicht, das Formular abzuschicken, wenn nicht alle von ihnen markiert sind.

Beispiel-Code:

<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />

Wenn Sie dasselbe mit Radio-Eingaben verwenden, funktioniert das Formular wie erwartet (wenn eine der Optionen ausgewählt ist, wird das Formular validiert)

Según Joe Hopfgartner (der behauptet, die html5-Spezifikationen zu zitieren), ist das angebliche Verhalten:

Bei Kontrollkästchen ist das erforderliche Attribut nur dann erfüllt, wenn eines oder mehrere Kontrollkästchen mit diesem Namen in diesem Formular angekreuzt sind.

Bei Optionsfeldern ist das geforderte Attribut nur dann erfüllt, wenn genau eines der Optionsfelder in dieser Gruppe markiert ist.

Mache ich etwas falsch, oder ist dies ein Browser-Bug (auf beiden Chrome & ff)?

Answer 1

Sie können es mit jQuery eine weniger Zeilen machen:

$(function(){

    var requiredCheckboxes = $(':checkbox[required]');

    requiredCheckboxes.change(function(){

        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        }

        else {
            requiredCheckboxes.attr('required', 'required');
        }
    });

});

Avec $(':checkbox[required]') wählen Sie alle Kontrollkästchen mit dem Attribut erforderlich dann, mit dem .ändern Methode auf diese Gruppe von Kontrollkästchen anwenden, können Sie die Funktion die Sie wünschen, wenn sich ein Element dieser Gruppe ändert. In diesem Fall, wenn eines der Kontrollkästchen aktiviert ist, entferne ich die erforderlich Attribut für alle Kontrollkästchen, die Teil der ausgewählten Gruppe sind.

Ich hoffe, das hilft.

Abschied nehmen.

Answer 2

Entschuldigung, jetzt habe ich besser gelesen, was Sie erwartet haben, also aktualisiere ich die Antwort.

Auf der Grundlage der HTML5-Spezifikationen vom W3C, ist alles in Ordnung. Ich habe erstellt dieser JSFiddle-Test und es verhält sich korrekt gemäß den Spezifikationen (für die Browser, die auf den Spezifikationen basieren, wie Chrome 11 und Firefox 4):

<form>
    <input type="checkbox" name="q" id="a-0" required autofocus>
    <label for="a-0">a-1</label>
    <br>

    <input type="checkbox" name="q" id="a-1" required>
    <label for="a-1">a-2</label>
    <br>

    <input type="checkbox" name="q" id="a-2" required>
    <label for="a-2">a-3</label>
    <br>

    <input type="submit">
</form>

Ich stimme zu, dass es nicht sehr brauchbar ist (in der Tat haben sich viele Leute darüber in der Mailinglisten des W3C ).

Aber die Browser folgen nur den Empfehlungen der Norm, was auch richtig ist. Die Norm ist ein wenig irreführend, aber wir können in der Praxis nichts dagegen tun. Sie können jedoch immer JavaScript für die Formularvalidierung verwenden wie einige große jQuery Validierung Plugin.

Ein anderer Ansatz wäre die Wahl eines Polyfill die dafür sorgen kann, dass (fast) alle Browser die Formularvalidierung richtig interpretieren.

Answer 3

Um einen anderen Ansatz ähnlich der Antwort von @IvanCollantes zu bieten. Er funktioniert, indem die erforderlichen Kontrollkästchen zusätzlich nach Namen gefiltert werden. Außerdem habe ich den Code etwas vereinfacht und prüfe auf einen Standard checked Kontrollkästchen.

jQuery(function($) {
  var requiredCheckboxes = $(':checkbox[required]');
  requiredCheckboxes.on('change', function(e) {
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
    var isChecked = checkboxGroup.is(':checked');
    checkboxGroup.prop('required', !isChecked);
  });
  requiredCheckboxes.trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form target="_blank">
  <p>
    At least one checkbox from each group is required...
  </p>
  <fieldset>
    <legend>Checkboxes Group test</legend>
    <label>
      <input type="checkbox" name="test[]" value="1" checked="checked" required="required">test-1
    </label>
    <label>
      <input type="checkbox" name="test[]" value="2" required="required">test-2
    </label>
    <label>
      <input type="checkbox" name="test[]" value="3" required="required">test-3
    </label>
  </fieldset>
  <br>
  <fieldset>
    <legend>Checkboxes Group test2</legend>
    <label>
      <input type="checkbox" name="test2[]" value="1" required="required">test2-1
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="2" required="required">test2-2
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="3" required="required">test2-3
    </label>
  </fieldset>
  <hr>
  <button type="submit" value="submit">Submit</button>
</form>

Answer 4

Ich hatte das gleiche Problem, meine Lösung war die Anwendung des erforderlichen Attributs auf alle Elemente

<input type="checkbox" name="checkin_days[]" required="required" value="0" /><span class="w">S</span>
<input type="checkbox" name="checkin_days[]" required="required" value="1" /><span class="w">M</span>
<input type="checkbox" name="checkin_days[]" required="required" value="2" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="3" /><span class="w">W</span>
<input type="checkbox" name="checkin_days[]" required="required" value="4" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="5" /><span class="w">F</span>
<input type="checkbox" name="checkin_days[]" required="required" value="6" /><span class="w">S</span>

Wenn der Benutzer eines der Elemente ankreuzt, entferne ich das erforderliche Attribut aus allen Elementen:

var $checkedCheckboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]:checked'),
    $checkboxes = $('#recurrent_checkin :checkbox[name="checkin_days[]"]');

$checkboxes.click(function() {

if($checkedCheckboxes.length) {
        $checkboxes.removeAttr('required');
    } else {
        $checkboxes.attr('required', 'required');
    }

 });

Answer 5

Hier ist eine Verbesserung für icovas Antwort. Sie gruppiert auch die Eingaben nach Namen.

$(function(){
  var allRequiredCheckboxes = $(':checkbox[required]');
  var checkboxNames = [];

  for (var i = 0; i < allRequiredCheckboxes.length; ++i){
    var name = allRequiredCheckboxes[i].name;
    checkboxNames.push(name);
  }

  checkboxNames = checkboxNames.reduce(function(p, c) {
    if (p.indexOf(c) < 0) p.push(c);
    return p;
  }, []);

  for (var i in checkboxNames){
    !function(){
      var name = checkboxNames[i];
      var checkboxes = $('input[name="' + name + '"]');
      checkboxes.change(function(){
        if(checkboxes.is(':checked')) {
          checkboxes.removeAttr('required');
        } else {
          checkboxes.attr('required', 'required');
        }
      });
    }();
  }

});