Verwenden Sie das HTML5-Attribut "Erforderlich" für eine Gruppe von Kontrollkästchen?

Bei Verwendung der neueren Browser, die HTML5 unterstützen (z. B. FireFox 4);
und ein Formularfeld hat das Attribut required='required';
und das Formularfeld ist leer / leer;
und die Senden-Schaltfläche wird angeklickt;
Der Browser erkennt, dass das Feld "Erforderlich" leer ist, und sendet das Formular nicht.
Stattdessen zeigt der Browser einen Hinweis an, in dem der Benutzer aufgefordert wird, Text in das Feld einzugeben.

Anstelle eines einzelnen Textfeldes habe ich jetzt eine Gruppe von Kontrollkästchen , von denen mindestens eines vom Benutzer aktiviert werden sollte.

Wie kann ich HTML5 verwenden? required Attribut für diese Gruppe von Kontrollkästchen verwenden? (Da nur eines der Kontrollkästchen aktiviert sein muss, kann ich das requiredAttribut nicht auf jedes einzelne Kontrollkästchen setzen.)

ps. Ich benutze simple_form , wenn das wichtig ist.

AKTUALISIEREN

Könnte das HTML 5 multipleAttribut hier hilfreich sein? Hat jemand es schon einmal benutzt, um etwas Ähnliches wie meine Frage zu tun?

AKTUALISIEREN

Es scheint, dass diese Funktion von der HTML5-Spezifikation nicht unterstützt wird: ISSUE-111: Was bedeutet die Eingabe. @ Erforderlich für das Kontrollkästchen @type =?

(Problemstatus: Das Problem wurde unbeschadet als geschlossen markiert. ) Und hier ist die Erklärung .

UPDATE 2

Es ist eine alte Frage, wollte aber klarstellen, dass die ursprüngliche Absicht der Frage darin bestand, die oben genannten Aufgaben ohne Verwendung von Javascript ausführen zu können - dh mithilfe einer HTML5-Methode. Im Nachhinein hätte ich das "ohne Javascript" offensichtlicher machen sollen.

Leider bietet HTML5 keine sofort einsatzbereite Möglichkeit, dies zu tun.

Mit jQuery können Sie jedoch leicht steuern, ob eine Kontrollkästchengruppe mindestens ein markiertes Element enthält.

Betrachten Sie das folgende DOM-Snippet:

<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>

Sie können diesen Ausdruck verwenden:

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

Dies wird zurückgegeben, truewenn mindestens ein Element aktiviert ist. Auf dieser Grundlage können Sie Ihre Validierungsprüfung implementieren.

Es ist ein einfacher Trick. Dies ist jQuery-Code, der die HTML5-Validierung ausnutzen kann, indem er die requiredEigenschaften ändert, wenn eine aktiviert ist. Im Folgenden finden Sie Ihren HTML-Code (stellen Sie sicher, dass Sie alle für die Gruppe erforderlichen Elemente hinzufügen.)

<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

Es folgt das jQuery-Skript, das die weitere Validierungsprüfung deaktiviert, wenn eines ausgewählt ist. Wählen Sie mit dem Namenselement.

$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);
}

Kleines Problem hier: Da Sie die HTML5-Validierung verwenden, stellen Sie sicher, dass Sie diese ausführen, bevor sie validiert wird, dh bevor Sie das Formular senden.

// 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
});

Ich denke, es gibt keinen Standard-HTML5-Weg, um dies zu tun, aber wenn es Ihnen nichts ausmacht, eine jQuery-Bibliothek zu verwenden, konnte ich eine Validierung der "Kontrollkästchengruppe" mithilfe der " Gruppe erforderlich " von Webshims durchführen ‘ Validierungsfunktion:

In den Dokumenten für Gruppenangaben heißt es:

Wenn ein Kontrollkästchen die Klasse 'Gruppe erforderlich' hat, muss mindestens eines der Kontrollkästchen mit demselben Namen im Formular / Dokument aktiviert werden.

Und hier ist ein Beispiel, wie Sie es verwenden würden:

<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" />

Ich verwende hauptsächlich Webshims, um HTML5-Funktionen zu polyfillen, aber es gibt auch einige großartige optionale Erweiterungen wie diese.

Sie können sogar Ihre eigenen benutzerdefinierten Gültigkeitsregeln schreiben. Zum Beispiel musste ich eine Kontrollkästchengruppe erstellen, die nicht auf dem Namen der Eingabe basierte, also habe ich meine eigene Gültigkeitsregel dafür geschrieben ...

HTML5 unterstützt nicht direkt, dass nur ein / mindestens ein Kontrollkästchen in einer Kontrollkästchengruppe aktiviert sein muss. Hier ist meine Lösung mit 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;
                }
            }
        }

Das Javascript stellt sicher, dass mindestens ein Kontrollkästchen aktiviert ist, und erfordert dann die gesamte Kontrollkästchengruppe. Wenn das aktivierte Kontrollkästchen deaktiviert wird, sind wieder alle Kontrollkästchen erforderlich!

Ich hatte das gleiche Problem und meine Lösung war folgende:

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/

Inspiriert von den Antworten von @thegauraw und @Brian Woodward, habe ich für JQuery-Benutzer Folgendes zusammengestellt, einschließlich einer benutzerdefinierten Validierungsfehlermeldung:

$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.");
        });
    }
});

Beachten Sie, dass in meinem Formular standardmäßig einige Kontrollkästchen aktiviert sind.

Vielleicht könnten einige von Ihnen JavaScript / JQuery-Assistenten das noch weiter verschärfen?

Wir können dies auch leicht mit HTML5 tun, müssen nur etwas JQuery-Code hinzufügen

Demo

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');
        }
    });
});

Ich habe einer Gruppe von Kontrollkästchen ein unsichtbares Radio hinzugefügt. Wenn mindestens eine Option aktiviert ist, wird auch das Radio aktiviert. Wenn alle Optionen abgebrochen sind, ist das Radio ebenfalls auf Abbrechen eingestellt. Daher verwendet das Formular die Eingabeaufforderung "Bitte aktivieren Sie mindestens eine Option".

• Sie können nicht verwenden display: none da das Radio nicht fokussiert werden kann.
• Ich mache die Funkgröße gleich der gesamten Größe der Kontrollkästchen, daher ist es offensichtlicher, wenn Sie dazu aufgefordert werden.

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/

Hallo, verwenden Sie einfach ein Textfeld zusätzlich zur Gruppe der Kontrollkästchen. Wenn Sie auf ein Kontrollkästchen klicken, geben Sie Werte in dieses Textfeld ein. Stellen Sie sicher, dass dieses Textfeld erforderlich und schreibgeschützt ist.

Mir ist klar, dass es hier eine Menge Lösungen gibt, aber ich habe festgestellt, dass keine von ihnen alle meine Anforderungen erfüllt:

• Keine benutzerdefinierte Codierung erforderlich
• Code funktioniert beim Laden der Seite
• Keine benutzerdefinierten Klassen erforderlich (Kontrollkästchen oder deren übergeordnete Elemente)
• Ich brauchte mehrere Kontrollkästchenlisten, um dasselbe zu teilen, nameum Github-Probleme über ihre API zu senden, und verwendete den Namen label[], um Beschriftungen in vielen Formularfeldern zuzuweisen (zwei Kontrollkästchenlisten und einige Auswahl- und Textfelder) - vorausgesetzt, ich hätte dies erreichen können, ohne dass sie geteilt wurden der gleiche Name, aber ich beschloss, es zu versuchen, und es funktionierte.

Die einzige Voraussetzung für diese ist jQuery. Sie können dies mit der großartigen Lösung von @ ewall kombinieren, um benutzerdefinierte Validierungsfehlermeldungen hinzuzufügen.

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>

Hier ist ein weiterer einfacher Trick mit Jquery !!

HTML

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>

JQuery

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

Das ist alles. Dies funktioniert, denn wenn keines der Kontrollkästchen aktiviert ist, wird nichts in Bezug auf die Kontrollkästchengruppe (einschließlich ihres Namens) auf dem Server veröffentlicht

Versuchen:

self.request.get('sports_played', allow_multiple=True)

oder

self.request.POST.getall('sports_played')

Genauer:

Stellen Sie beim Lesen von Daten aus dem Kontrollkästchen-Array sicher, dass das Array Folgendes enthält:

len>0 

In diesem Fall:

len(self.request.get('array', allow_multiple=True)) > 0