@Alexandr1996

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

Ребят, я в javascript не в зуб ногой, помогите, пожалуйста. Перерыл весь интернет и не могу настроить валидацию формы.
Форма состоит из: Имя, телефон, страна, город, сообщение и чекбокс согласия с условиями. Нужно проверить с помощью blur,если не верно введена информация, не подходит под регулярку или поле пустое, то:
603e425b5e2ce851667123.jpeg
если всё хорошо, то:
603e4283f39c7217285819.png
при клике на кнопку проверять есть ли незаполненные поля и в случае ошибки выводится сообщение "заполните все поля"
если всё хорошо, то форма отправляется.

Накуралесил сам, чёрт ногу сломит, она работает, но с багами, blur -работает, при клике на кнопку ошибка выводится, если ошибок нет то отправляется, но если сначала нажать на "отправить", затем заполнить одно поле, но при этом не заполнить другие, то сообщение об ошибке пропадает и пользователю не сообщается, что не так
Понимаю, что много лишнего в коде и, думаю, есть способ боле удобоваримый, помогите, пожалуйста

const form = document.querySelector("form");

    const regExpName = /^([а-яёА-яЁ_-]|[a-zA-Z_-]){2,}/;
    const regExpCity = /^([а-яёА-яЁ_-]|[a-zA-Z_-]){2,}/;
    const regExpCountry = /^([а-яёА-яЁ_-]|[a-zA-Z_-]){2,}/;
    const regExpPhone = /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){11,14}(\s*)?$/;
    const regExpEmail = /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm;
    let isValidate = false;
    let isName = false;
    let isPhone = false;
    let isEmail = false;
    let isCountry = false;
    let isCity = false;
    let isMessage = false;

    form.addEventListener("submit", (even) => {
        even.preventDefault();
        for (let elem of form.elements) {
            if (elem.tagName !== "BUTTON" && !elem.classList.contains("popup__check-hide")) {
                if (elem.value === "") {
                    $('.popup__error-message').text('Заполните, пожалуйста, все поля в форме')
                    isValidate = false;
                } else {
                    $('.popup__error-message').text('');
                    isValidate = true;
                }
            }
        }
        if (isValidate && isName && isCountry && isCity && isMessage && isPhone && isEmail) {
            if (form.querySelector('.popup__check-hide').checked) {
                submit()
            } else {
                $('.popup__label').addClass('error');
            }
        }
    });

    for (let elem of form.elements) {
        if (elem.tagName != "BUTTON") {
            elem.addEventListener('blur', () => {
                validateElem(elem);
            });
        }
    }

    const validateElem = (elem) => {
        if (elem.name === "name") {
            if (!regExpName.test(elem.value) && elem.value !== "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isName = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isName = true;
            }
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isName = true;
            }
        }
        if (elem.name === "phone") {
            if (!regExpPhone.test(elem.value) && elem.value !== "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isPhone = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isPhone = true;
            }
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isPhone = true;
            }
        }
        if (elem.name === "email") {
            if (!regExpEmail.test(elem.value) && elem.value !== "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isEmail = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isEmail = true;
            }
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isEmail = true;
            }
        }
        if (elem.name === "country") {
            if (!regExpCountry.test(elem.value) && elem.value !== "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isCountry = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isCountry = true;
                $('.popup__form-group.city').show();
            }
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isCountry = true;
                $('.popup__form-group.city').hide();
            }
        }
        if (elem.name === "city") {
            if (!regExpCity.test(elem.value) && elem.value !== "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isCity = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isCity = true;
            }
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isCity = true;
            }
        }
        if (elem.name === "message") {
            if (elem.value == "") {
                elem.parentNode.classList.remove('success');
                elem.parentNode.classList.add('error');
                isMessage = false;
            } else {
                elem.parentNode.classList.remove('error');
                elem.parentNode.classList.add('success');
                isMessage = true;
            }
        }
    }

    const submit = () => {
        form.reset();
    }
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm
Боты, парсеры, расширения
Для валидации формы на стороне браузера JavaScript не нужен! У полей input есть атрибут pattern, где можно прописать регулярное выражение для проверки и пока пользователь не введет данные в заданном вами формате, поле будет красным. Саму подсветку можно кастомизировать как душе угодно при помощи CSS-псевдоклассов.

https://yandex.ru/search/?text=input%20patternt%20...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы