Django 在提交前檢查復選框是否被選中

Question

我對 Django 中的復選框有疑問。 所以主要問題是如何在提交之前檢查是否至少選擇了一個按鈕。

我的想法是，如果沒有選擇任何按鈕但你按下提交，然后它會彈出一個小通知“請 select 至少一個按鈕”。

4 個按鈕：

<form method="post" action="{% url 'qrseite' %}">
            {% csrf_token %}


            <input type="checkbox" id="colaControl" name="getranke" value="cola"/>
            <label for="colaControl"><div class="cola" style="border-radius: 10px;">
                <img src="{% static 'img/cola_img.png' %}" width="155" height="auto">
            </div></label>


            <input type="checkbox" id="spriteControl" name="getranke" value="sprite"/>
            <label for="spriteControl"><div class="sprite" style="border-radius: 10px;">
                <img src="{% static 'img/sprite_img.png' %}" width="120" height="auto">
            </div></label>


            <div style="clear:both;"></div>


            <input type="checkbox" id="fantaControl" name="getranke" value="fanta"/>
            <label for="fantaControl"><div class="fanta" style="border-radius: 10px;">
                <img src="{% static 'img/fanta_img.png' %}" width="110" height="auto">
            </div></label>


            <input type="checkbox" id="pepsiControl" name="getranke" value="pepsi"/>
            <label for="pepsiControl"><div class="pepsi" style="border-radius: 10px;">
                <img src="{% static 'img/pepsi_img.png' %}" width="120" height="auto">
            </div></label>


            <div style="clear:both;"></div>


        <input type="submit" id="submitControl">
        <label for="submitControl"><div class="accept_Button" style="border-radius: 10px;">
                Bestätigung
                <img src="{% static 'img/qrcode_img.png' %}" width="50" height="auto" style="margin-top: ">
            </div></a>
        </label>

        </form>

Answer 1

您需要 javascript 來阻止表單提交並進行驗證。

將相同的 html class 添加到每個復選框，以便您可以遍歷每個復選框。 此外，您需要一個 html 元素來顯示您想要使用 class 'error-message' 顯示的消息。 或者使用alert() function。

例如：

document.querySelector('#submitControl').addEventListener('click', (event) => {
    event.preventDefault();

    // get all checkboxes by its class
    const checkBoxes = document.querySelectorAll('.checkbox');
    let checked = false;

    // loop over each checkbox to see if its checked and stop looping if true.
    for (let i = 0; i < checkBoxes.length; i++) {
        if (checkBoxes[i].checked) {
             checked = true;
             break;
        }
    }

    if (checked) {
        // submit form
        document.querySelector('form').submit();
    } else {
        // show popup, for example toggle 'error-message--hidden' class that displays and hides the error message or alert()
        document.querySelector('.error-message').classList.toggle('error-message--hidden');
        // window.alert('Please select at least one button.')
    }
})