@ForSureN1
frontend dev

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

Добрый день, имеется форма регистрации с несколькими окнами ввода данных, которые переключатся табами и кнопкой "далее" на каждом окне, так вот, мне нужно чтобы если пользователь пропустил какое то поле, при нажатии на кнопку не давало перейти на следующее окно и выводило сообщение о том что нужно заполнить данные на том окне, где он их пропустил.
Я пытался подвешивать событие на кнопку, внутри которой он получает value input-ов, но все работает честно говоря некорректно, вот фрагменты кода
function clickTabForm() {
		let tabNavs = document.querySelectorAll('.registration__step-item');
		let buttonNavs = document.querySelectorAll('.js-next'); ---- кнопка "далее" на окне
		let tabPanes = document.querySelectorAll('.registration__window-elements'); ---- Наши окна с вводом данных

		for (let i = 0; i < tabNavs.length; i++) {
		  tabNavs[i].addEventListener("click", function(e){
		    e.preventDefault();
		    let activeTabAttr = e.target.getAttribute("data-tab");
		    for (let j = 0; j < tabNavs.length; j++) {
		      let contentAttr = tabPanes[j].getAttribute("data-tab-content");
		      if (activeTabAttr === contentAttr) {
		        tabNavs[j].classList.add("active");
		        tabPanes[j].classList.add("active"); 
		      } else {
		        tabNavs[j].classList.remove("active");
		        tabPanes[j].classList.remove("active");
		      }
		    };
		  });
		}

		for (let i = 0; i < buttonNavs.length; i++) {
			buttonNavs[i].addEventListener('click', () => {
				tabPanes[i].classList.remove('active');
				tabPanes[i].nextElementSibling.classList.add('active')
				tabNavs[i].classList.remove('active')
				tabNavs[i].nextElementSibling.classList.add('active')
			})
		}
	}

	// function disableButton(){
	// 	let button = document.querySelectorAll('.js-next')
	// 	for (let i = 0; i < button.length; i++) {
	// 		button[i].addEventListener('click', () => {
	// 			let input = document.querySelectorAll('.js-inputs');
	// 			for (let i = 0; i < input.length; i++) {
	// 				if(input[i].value == "") {
	// 					button[i].classList.add('disabled')
	// 				} else {
	// 					button[i].classList.remove('disabled')
	// 				}
	// 			}
	// 		})
	// 	}
	// }

	if(formLayer) {
		clickTabForm();
		// disableButton();
	}

Закомментированное это мои попытки, класс disabled означает: pointer-events: none;
P.S. - на каждом input-е стоит required, если поле пустое, то нам не даст нажать submit, но сам сабмит находится на последнем окне
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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