如何使表单中的复选框有效

Question

我有一个基本问题，但找不到解决方案。

如何强制我的用户选中该框：接受条件？ （j'acceptes les Conditions d'utilizations = 我同意条款和条件）

这是我的表格的图片：

这是我的 HTML：

    <section id="formDom">
        <form class="column g-3 needs-validation" novalidate>
            <div class="col-md-4">
                <label for="validationCustom01" class="form-label">Nom</label>
                <input type="text" class="form-control" placeholder="Dupont" id="firstName" required>
                <div class="valid-feedback">
                    Ok
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustom01" class="form-label">prénom</label>
                <input type="text" class="form-control" placeholder="Jean" id="lastName" required>
                <div class="valid-feedback">
                    Ok
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustomUsername" class="form-label">Adresse mail</label>
                <div class="input-group has-validation">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                    <input type="email" class="form-control" id="email" aria-describedby="inputGroupPrepend"
                        placeholder="[email protected]" required>
                    <div class="invalid-feedback">
                        Adresse mail requise
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustom01" class="form-label">Ville</label>
                <input type="text" class="form-control" placeholder="Paris" id="city" required>
                <div class="valid-feedback">
                    Ok
                </div>
            </div>
            <div class="col-md-4">
                <label for="validationCustom03" class="form-label">Adresse</label>
                <input type="text" class="form-control" placeholder="1 rue de Paris" id="adress" required>
                <div class="invalid-feedback">
                    adresse réquise
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                    <label class="form-check-label" for="invalidCheck">
                        J'accepte les conditions d'utilisations
                    </label>
                    <div class="invalid-feedback">
                        Vous devez accepteer les conditions d'utilisations
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <button id="buyBtn" class="btn btn-primary basket-btn" type="submit">Acheter</button>
            </div>
        </form>
    </section>

实际上用户被迫填写表格，但他可以在不选中复选框（接受条件）的情况下提交

这是 JS :

        function validForm() {
            const form = document.querySelector('.needs-validation');
            form.addEventListener('submit', function (event) {
                event.preventDefault();
                event.stopPropagation();
                cameraIds = getBasket().map(item => { return item.id });
                const contact = {
                    email: document.getElementById("email").value,
                    firstName: document.getElementById("firstName").value,
                    lastName: document.getElementById("lastName").value,
                    city: document.getElementById("city").value,
                    address: document.getElementById("adress").value,
                }

                createOrder(contact, cameraIds, (order, error) => {
                    if (error) {
                        alert('Merci de remplir le formulaire');
                    } else {
                        localStorage.clear();
                        location.assign(`confirmation.html?id=${order.orderId}`)
                    }
                    form.classList.add('was-validated');
                })
            })
        }
        validForm();

PS：我正在使用 BOOTSTRAP，但我想你明白了 ^^

Answer 1

if(document.getElementById('invalidCheck').checked==true)
 //you'r accepted the terms 
else
 //you should accept the terms

Answer 2

您可以检查

document.getElementById("").checked

Answer 3

您可以通过测试

checked

元素的

input

属性来检查复选框是否被选中：

var isChecked = document.querySelector('input[type="checkbox"]').checked;

if(!isChecked) {
 alert("You must accept the terms before proceeding");
}

就您而言，它将是：

var isChecked = document.querySelector('.needs-validation .form-check-input').checked;