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

Question

[ForSureN1]

Добрый день, имеется форма регистрации с несколькими окнами ввода данных, которые переключатся табами и кнопкой "далее" на каждом окне, так вот, мне нужно чтобы если пользователь пропустил какое то поле, при нажатии на кнопку не давало перейти на следующее окно и выводило сообщение о том что нужно заполнить данные на том окне, где он их пропустил.
Я пытался подвешивать событие на кнопку, внутри которой он получает 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, но сам сабмит находится на последнем окне

Comments

[ForSureN1]

Попробовал зайти с другой стороны, сразу дал кнопкам disabled, но если вводишь данные в поля, ничего не происходит

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

P.S. Внес небольшие изменения, теперь добавив строчку

input[i] = document.querySelectorAll('.js-inputs').value;

после
input[i].addEventListener('input', () => {
Кнопка активируется как только мы что то ввели в первое поле, а нужно чтобы она активировалась только если все поля введены