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

Eine kleine jQuery-Korrektur:

$(function(){
    var chbxs = $(':checkbox[required]');
    var namedChbxs = {};
    chbxs.each(function(){
        var name = $(this).attr('name');
        namedChbxs[name] = (namedChbxs[name] || $()).add(this);
    });
    chbxs.change(function(){
        var name = $(this).attr('name');
        var cbx = namedChbxs[name];
        if(cbx.filter(':checked').length>0){
            cbx.removeAttr('required');
        }else{
            cbx.attr('required','required');
        }
    });
});

Answer 2

Aufbauend auf der Antwort von icova finden Sie hier den Code, mit dem Sie eine benutzerdefinierte HTML5-Validierungsmeldung verwenden können:

$(function() {
    var requiredCheckboxes = $(':checkbox[required]');
    requiredCheckboxes.change(function() {
        if (requiredCheckboxes.is(':checked')) {requiredCheckboxes.removeAttr('required');}
        else {requiredCheckboxes.attr('required', 'required');}
    });
    $("input").each(function() {
        $(this).on('invalid', function(e) {
            e.target.setCustomValidity('');
            if (!e.target.validity.valid) {
                e.target.setCustomValidity('Please, select at least one of these options');
            }
        }).on('input, click', function(e) {e.target.setCustomValidity('');});
    });
});

Answer 3

var verifyPaymentType = function () {
   //coloque os checkbox dentro de uma div com a class checkbox
  var inputs =  window.jQuery('.checkbox').find('input');
  var first = inputs.first()[0];

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

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

window.jQuery('#submit').click(verifyPaymentType);

}