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

Question

[Alexandr1996]

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

если всё хорошо, то:

при клике на кнопку проверять есть ли незаполненные поля и в случае ошибки выводится сообщение "заполните все поля"
если всё хорошо, то форма отправляется.

Накуралесил сам, чёрт ногу сломит, она работает, но с багами, 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();
    }

Comments

[Lukmann]

let reservationForm = document.querySelector('.reservationForm');
let reservationFormReq = document.querySelectorAll('.reservationForm ._input');
reservationForm.onsubmit = function(){
	let index = 0;
	for(let i = 0;i<reservationFormReq.length;i++){
		reservationFormReq[i].classList.remove('empty');
		if(reservationFormReq[i].value === ''){
			reservationFormReq[i].classList.add('empty');
			index++;
		}
	}
        if(index === 0){
		alert('succses');

	}
	
}

если index равен нулю это значит что в форме незаполненных полей нет,сюдя добавляешь свой код,если пользователь неправильно введет email или что то другое просто делаешь index++

[Alexandr1996]

Lukmann, т.е. если я правильно понял, мне нужно объявить дополнительные переменные для каждого из полей и регулярных выражений и в цикл записать по правилу для каждого из полей типа:
if(!Регулярка.test.value){
Вывожу ошибку
index++;
} else{
Сообщаю. что всё ок
}

[Lukmann]

Alexandr1996, да

[Alexandr1996]

Lukmann, это проверка при клике на "отправить", а мне еще нужно проверять инпуты при потере фокуса, чтобы пользователь сразу понимал, что ошибся, как это сюда можно приписать?

[Lukmann]

Alexandr1996, я бы делал бы это отдельной функцией,

input.addEventListener("blur",function){
      this.classlist.remove('error');
      if(this.value === ''){
         this.classlist.add('error');    
      }
     if(!Регулярка.test.value){
         this.classlist.add('error'); 
     }
}
ну примерно так

[Nimbus1996]

Lukmann, спасибо большое, что объяснили!

Answer 1

[zkrvndm]

Для валидации формы на стороне браузера JavaScript не нужен! У полей input есть атрибут pattern, где можно прописать регулярное выражение для проверки и пока пользователь не введет данные в заданном вами формате, поле будет красным. Саму подсветку можно кастомизировать как душе угодно при помощи CSS-псевдоклассов.

https://yandex.ru/search/?text=input%20patternt%20...