Как сделать коректную валидацию полей формы?

Question

[Нікіта]

Нужно сделать валидацию полей, конкретно поля e-mail. Делал по данному видео уроку(timecode 30:00 - 38:30).
Застрял на том моменте, когда при нажатии кнопки "Отправить" невалидное поле должно подстветится красным.

<form class="form" action="#" id="form">
                        <div class="form__group">
                            <label for="input-email" class="form__label">Adress e-mail</label>
                            <input id="input-email" name="email" type="text" class="form__input _req _email" placeholder="[e-mail]" required>
                        </div>
                        <div class="form__group">
                            <label for="input-email" class="form__label">Request</label>
                            <textarea class="form__textarea _req" name="message" id="formMessage" placeholder="Type your request..." required></textarea>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn">SEND</button>
                        </div>
                    </form>

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

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

        let error = formValidate(form);
    }


    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('_email')) {
                if (emailTest(input)) {
                    formAddError(input);
                    error++;
                }
            } else if (input.getAttribute("type") === "checkbox" && input.checked === false) {
                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 emailTest(input) {
        return !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/.test(input.value);
    }
});

.form__input._error {
    box-shadow: 0 0 15px red;
}

У меня при нажатии на кнопку с типом Submit ничего не происходит

Comments

[alexalexes]

Если поставить точку останова внутри функции formSend(e), то выполнение ловится?

[Нікіта]

Немного не понял, где именно и какую точку поставить?

Answer 1

[Виктор Путин]

Есть хорошая статья на мдн про нативную валидацию. Через селектор :not(:placeholder-shown):valid/:invalid можно вешать стили для отображения состояния полей

Куда проще чем писать свои костыли

Comments

[Нікіта]

Спасибо, ознакомлюсь со статьей