Не работает форма отправки на почту уже на этапе JS

Проблема в том, что даже если *обязательные поля заполнены, всё равно возвращается "заполните обязательные поля". Хотя, по идее, должна крутиться анимация загрузки.

"use strict"

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form');
    form.addEventListener('submit', formSend);

    async function formSend(e) {
        e.preventDefault();

        let error = formValidate(form);

        let formData = new FormData(form);

        if (error === 0) {
            form.classList.add('_sending');
            let response = await fetch('sendmail.php', {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                let result = await response.json();
                alert(result.message);
                formPreview.innerHTML = '';
                form.reset();
            } else {
                alert("Ошибка");
            }
        } else {
            alert('Заполните обязательные поля');
        }
    }

    function formValidate(form) {
        let error = 0;
        let formReq = document.querySelectorAll('._req');

        for (let index = 0; index < formReq.length; index++) {
            const input = formReq[index];
            formRemoveError(input);

            if (input.classList.contains('._tel')) {
                if (telTest(input)) {
                    formAddError(input);
                    error++;
                }
            } else if (input.value === '') {
                formAddError(input);
                error++;
            }

        }
    }
    function formAddError(input) {
        input.parentElement.classList.add('_error');
        input.classList.add('_error');
    }
    function formRemoveError(input) {
        input.parentElement.classList.remove('_error');
        input.classList.remove('_error');
    }

    function telTest(input) {
        let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
        return regex.test(input.value);
    }
});
.contacts {
    display: flex;
    color: #fff;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(51, 51, 51, 0.9) url("../img/contacts/loading.gif") center / 50px no-repeat;
        opacity: 0;
        visibility: hidden;
        @extend %anim;
    }
    & ._sending {
        &::after {
            content: "";
            opacity: 1;
            visibility: visible;
        }
    }
    & input,
    select {
        width: 210px;
        height: 30px;
    }
    & textarea {
        width: 100%;
        height: 100px;
        resize: vertical;
    }
    & input,
    select,
    textarea {
        background: #0572cb;
        color: white;
        border-bottom: 1px solid white;
        padding: 5px;
        margin: 0 0 20px;
        &::placeholder {
            color: white;
            opacity: 0.5;
        }
    }
    & input._error,
    textarea._error {
        box-shadow: 0 0 15px #fd4a35;
    }

    &__picture {
        background: #fbaa6f;
        flex: 1 0 50%;
    }
    & .contact {
        background: #0572cb;
        flex: 1 0 50%;
        position: relative;
        padding: 110px 0;
        &__text {
            & h3 {
                font-size: 28px;
                margin-bottom: 50px;
                position: relative;
                &::before {
                    content: "";
                    display: inline-block;
                    background: url("../img/contacts/01.png") 0 0 / auto 100% no-repeat;
                    //border: 1px dashed #000;
                    height: 50px;
                    width: 50px;
                    position: absolute;
                    transform: translate(-10px, -60px);
                }
            }
            & span {
                display: block;
                //width: 432px;
                //border: 1px dashed #000;
                margin: 0px auto 30px;
            }
            & h4 {
                //border: 1px dashed red;
                //width: 432px;
                margin: 0 auto 20px;
            }
        }

        &__form {
            //border: 1px dashed #000;
            //width: 432px;
            margin: 80px auto 0;
            &_inputs {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
    <section id="contacts" class="contacts">
        <div class="contacts__picture"></div>
        <div class="contact">
          <div class="contact__text">
            <h3>Меня зовут Ирина Игоревна</h3><span>Записаться на первое занятие, а также задать вопросы по
                интересующей Вас
                иноформации:</span>
            <h4>Контакты</h4><span>+7 (906) 921-11-01</span>
            <form action="#" class="contact__form" id="form">
                <div class="contact__form_inputs">
                    <div class="contact__form_input">
                        <p>Ваше имя*</p>
                        <input id="formName" tabindex="1" name="name" type="text" class="_req">
                    </div>
                    <div class="contact__form_input">
                        <p>Номер телефона*</p>
                        <input id="formPhone" tabindex="2" name="phone" type="tel" class="_req _tel">
                    </div>
                    <div class="contact__form_input">
                        <p>Email</p>
                        <input tabindex="3" name="email" type="text">
                    </div>
                    <div class="contact__form_input">
                        <p>Услуга*</p>
                        <select tabindex="4" name="service" id="">
                            <option value="beforeschool">Раннее / Подготовка</option>
                            <option value="egeoge">ЕГЭ / ОГЭ</option>
                            <option value="english">Английский</option>
                            <option value="tutoring">Репетиторство</option>
                            <option value="prolongation">Продленка</option>
                        </select>
                    </div>
                </div>
                <div class="contact__form_area">
                    <p>Сообщение*</p>
                    <textarea
                        placeholder="Костя, 3 класс, необходимо заполнить пробелы по математике. Занятие в группе, удобно вторник / четверг во второй половине дня."
                        id="formMessage" tabindex="5" name="message" class="_req"></textarea>
                </div>
                <div tabindex="6" class="contact__form_btn">
                    <button class="contact__btn_button" type="submit">Отправить</button>
                    <!--<div class="contact__btn_thanks"></div>-->
                </div>
            </form>
        </div>
    </div>
</section>


Ответы (1 шт):

Автор решения: Андрей Широков

Да, причина была в том, что через CSS я не тому элементу задавал класс _sending и забыл в "валидации" вернуть ошибку (return error).

→ Ссылка