如何验证表单中的复选框

浸礼会

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

我如何强制用户选中该框:接受条件?(j'接受条件d'utilisations =我同意条款和条件)

这是我形式的照片: 我的表格

这是我的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,但我想您已经明白了^^

Agent.Logic_

您可以通过测试元素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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章