it-swarm.com.de

Verwenden Sie das HTML5-Attribut "required" 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 "erforderliche" Feld leer ist und sendet das Formular nicht;
Stattdessen zeigt der Browser einen Hinweis an, der den Benutzer auffordert, Text in das Feld einzugeben.

Jetzt habe ich anstelle eines einzelnen Textfeldes eine Gruppe von Kontrollkästchen, von denen mindestens eines vom Benutzer markiert/ausgewählt werden sollte.

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

ps. Ich benutze simple_form , wenn das wichtig ist.


[~ # ~] Update [~ # ~]

Könnte das HTML 5 multiple -Attribut hier hilfreich sein? Hat jemand es zuvor benutzt, um etwas Ähnliches wie meine Frage zu tun?

AKTUALISIEREN

Es erscheint, dass diese Funktion von der HTML5-Spezifikation nicht unterstützt wird: AUSGABE-111: Was macht das? Eingabe. @ erforderlich Mittelwert für @type = Kontrollkästchen?

(Issue status: Issue wurde unbeschadet als geschlossen markiert.) Und hier die Erklärung .

UPDATE 2

Es ist eine alte Frage, wollte aber klarstellen, dass die ursprüngliche Absicht der Frage darin bestand, in der Lage zu sein, das Obige ohne Verwendung von Javascript zu tun - d. H. Unter Verwendung einer HTML5-Methode, um dies zu tun. Rückblickend hätte ich das "ohne Javascript" offensichtlicher machen sollen.

147
Zabba

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

Mit jQuery können Sie jedoch problemlos 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 gibt true zurück, wenn mindestens ein Element markiert ist. Auf dieser Grundlage können Sie Ihre Validierungsprüfung implementieren.

66
Luca Fagioli

Es ist ein einfacher Trick. Dies ist jQuery-Code, der die HTML5-Validierung ausnutzen kann, indem er die required -Eigenschaften ändert, falls eine davon aktiviert ist. Das Folgende ist Ihr HTML-Code (stellen Sie sicher, dass Sie für alle Elemente in der Gruppe die erforderlichen 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

Das folgende jQuery-Skript deaktiviert die weitere Validierungsprüfung, falls eines ausgewählt ist. Mit Namenselement auswählen.

$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, d. H. Bevor Sie das Formular absenden.

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

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 "Checkbox Group" -Validierung mit Webshims '" gruppenpflichtige " Validierungsfunktion:

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

Wenn ein Kontrollkästchen die Klasse 'Gruppen erforderlich' enthält, muss mindestens eines der Kontrollkästchen mit dem gleichen Namen im Formular/Dokument aktiviert sein.

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 meistens Webshims, um HTML5-Funktionen zu füllen, aber es gibt auch einige großartige optionale Erweiterungen wie diese.

Sie können sogar Ihre eigenen benutzerdefinierten Gültigkeitsregeln schreiben. Ich musste zum Beispiel eine Kontrollkästchengruppe erstellen, die nicht auf dem Namen der Eingabe basierte, also schrieb ich meine eigene Gültigkeitsregel für diese ...

11
Tyler Rick

HTML5 unterstützt nicht direkt die Anforderung, dass nur ein/mindestens ein Kontrollkästchen in einer Kontrollkästchengruppe aktiviert ist. 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 fordert dann nicht die gesamte Kontrollkästchengruppe an. Wenn das aktivierte Kontrollkästchen deaktiviert wird, sind erneut alle Kontrollkästchen erforderlich!

7
Brian Woodward

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

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

Inspiriert von den Antworten von @thegauraw und @Brian Woodward, hier ein paar Informationen, die ich für JQuery-Benutzer zusammengestellt habe, 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 verschärfen?

2
ewall

wir können das auch mit html5 leicht machen, 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');
        }
    });
});
1
Juned Ansari

Hallo, benutze einfach ein zusätzliches Textfeld für die Kontrollkästchengruppe. Wenn du auf ein Kontrollkästchen klickst, gib Werte in dieses Textfeld ein.

1
Abijith

Ich habe einer Gruppe von Kontrollkästchen ein unsichtbares Radio hinzugefügt. Wenn mindestens eine Option aktiviert ist, ist das Radio ebenfalls auf Aktivieren eingestellt. Wenn alle Optionen deaktiviert sind, wird das Radio ebenfalls deaktiviert. Daher wird in dem Formular die Eingabeaufforderung "Bitte mindestens eine Option ankreuzen" verwendet.

  • Sie können display: none Nicht verwenden, da das Radio nicht fokussiert werden kann.
  • Ich stelle die Funkgröße auf die gesamte Größe des Kontrollkästchens ein, damit es bei Aufforderung offensichtlicher wird.

[~ # ~] 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