HTML+JS: Checkboxen als Pflichtfeld

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Mittwoch, 19. Januar 2022 um 12:55 Uhr (3/2022 Kalenderwoche)

geändert: Mittwoch, 19. Januar 2022 um 13:42 Uhr (3/2022 Kalenderwoche)

Keywords: Checkboxen Pflichtfeld required input type mutiple

Kategorien: HTML, JavaScript, PHP,

Text:

Bei "multiplen" Checkboxen ist es ohne JavaScript nicht möglich, das mit der HTML-Validierung zu schaffen.
Über das untenstehende Skript sollte es funktionieren.

Quellcode:   

<label class="checkbox-container"><span>Art der Anfrage*</span></label>

<label class="zweiter-checkbox-container">
    <input type="checkbox" id="f_anfrage_anfrageart_5" name="f_anfrage[anfrageart][]"
           value="5" required="required"
           onchange="pruefeCheckboxenAnfragearten();">
    <span>Aktionspost</span>
</label>
<label class="zweiter-checkbox-container">
    <input type="checkbox" id="f_anfrage_anfrageart_3" name="f_anfrage[anfrageart][]"
           value="3" required="required"
           onchange="pruefeCheckboxenAnfragearten();">
    <span>Beschwerde über Dritte</span>
</label>
<label class="zweiter-checkbox-container">
    <input type="checkbox" id="f_anfrage_anfrageart_1" name="f_anfrage[anfrageart][]"
           value="1" required="required"
           onchange="pruefeCheckboxenAnfragearten();">
    <span>Information</span>
</label>
<label class="zweiter-checkbox-container">
    <input type="checkbox" id="f_anfrage_anfrageart_4" name="f_anfrage[anfrageart][]"
           value="4" required="required"
           onchange="pruefeCheckboxenAnfragearten();">
    <span>Mitteilungen/Hinweise</span>
</label>
<label class="zweiter-checkbox-container">
    <input type="checkbox" id="f_anfrage_anfrageart_2" name="f_anfrage[anfrageart][]"
           value="2" required="required"
           onchange="pruefeCheckboxenAnfragearten();">
    <span>Politikkritik</span>
</label>


<script>
    function pruefeCheckboxenAnfragearten() {
        const inputs = document.querySelectorAll('[name="f_anfrage[anfrageart][]"]');
        //alert("inputs.length: [" + inputs.length + "]");

        let isAtLeastOneCheckboxSelected = false;
        for(let i = inputs.length-1; i >= 0; --i) {
            if (inputs[i].checked) {
                isAtLeastOneCheckboxSelected = true;
                break;
            }
        }
        //alert("Checkbox-Checked?: [" + isAtLeastOneCheckboxSelected + "]");
        if (isAtLeastOneCheckboxSelected == false) {
            //Wenn keine Checkbox gecheckt, dann das Required-Attribut reinschreiben.
            for(let i = inputs.length-1; i >= 0; --i) {
                wert = inputs[i].value;
                //alert("id-Wert(NOT Checked): [f_anfrage_anfrageart_" + wert + "]");
                document.getElementById("f_anfrage_anfrageart_" + wert)
                        .setAttribute('required', 'required');
            }
            //alert("Sie haben keine Anfrageart ausgewählt");
            return false;
        } else {
            //Wenn mindestens eine angehakt ist, dann das Required-Attribut entfernen
            for(let i = inputs.length-1; i >= 0; --i) {
                wert = inputs[i].value;
                //alert("id-Wert(checked): [f_anfrage_anfrageart_" + wert + "]");
                document.getElementById("f_anfrage_anfrageart_" + wert)
                        .removeAttribute('required');
            }
            //alert("Super, alles klar!");
            return true;
        }//ENDE: else ==> if ()
    }
</script>