samedi 26 décembre 2020

How to valid checkbox in a form

I have a basic question but i can't find the solution .

how can i force my user to check the box : accept the condition ? (j'acceptes les conditions d'utilisations = i agree terms & conditions )

here is a pictures of my form : My form

here is my 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="jeandupont@gmail.com" 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>

Actually the user is forced to fill the form but he can submit without check the box ( accept condition )

Here is the 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 : i'm using BOOTSTRAP but i think you got it ^^




Aucun commentaire:

Enregistrer un commentaire