Validar formulario de etapas javascript

See more:

Javascript

Java

validation

Pessoal sera que alguem em ajuda a fazer uma vaidação no meu formularo em java, quero que ele libera ir para o proximo campo so depois de preencher o s campos corretamente.

const slidePage = document.querySelector(".slide-page");
const formUser = document.querySelector(".formUser");
const nextBtnFirst = document.querySelector(".firstNext");
nextBtnFirst.addEventListener('click', (e) => {
  e.preventDefault()

  const nome = document.getElementById('nome');
  const sobrenome = document.getElementById('sobrenome');

  if (nome.value == '') {
    nome.classList.add('errorInput')
    }else{
      nome.classList.remove('errorInput')
    }

  if (sobrenome.value == '') {
    sobrenome.classList.add('errorInput')
    }else{
      sobrenome.classList.remove('errorInput')    
    }  
  })
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");

const progressText = [...document.querySelectorAll(".step p")];
const progressCheck = [...document.querySelectorAll(".step .check")];
const bullet = [...document.querySelectorAll(".step .bullet")];
let max = 4;
let current = 1;

nextBtnFirst.addEventListener("click", function(e1){
  slidePage.style.marginLeft = "-25%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnSec.addEventListener("click", function(){
  slidePage.style.marginLeft = "-50%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
nextBtnThird.addEventListener("click", function(){
  slidePage.style.marginLeft = "-75%";
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
});
submitBtn.addEventListener("click", function(){
  bullet[current - 1].classList.add("active");
  progressCheck[current - 1].classList.add("active");
  progressText[current - 1].classList.add("active");
  current += 1;
  setTimeout(function(){
    location.reload();
  },2500);
});

prevBtnSec.addEventListener("click", function(){
  slidePage.style.marginLeft = "0%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnThird.addEventListener("click", function(){
  slidePage.style.marginLeft = "-25%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});
prevBtnFourth.addEventListener("click", function(){
  slidePage.style.marginLeft = "-50%";
  bullet[current - 2].classList.remove("active");
  progressCheck[current - 2].classList.remove("active");
  progressText[current - 2].classList.remove("active");
  current -= 1;
});

What I have tried:

function toggleButton(){
  const nome = document.querySelector('#nome').value;
  const sobrenome = document.querySelector('#sobrenome').value;

  if (nome && sobrenome) {
    document.querySelector('#firstNext').disabled = false;
    return
    }
    document.querySelector('#firstNext').disabled = true;     
};

=========================================================

nextBtnFirst.addEventListener('click', (e) => {
  e.preventDefault()

  const nome = document.getElementById('nome');
  const sobrenome = document.getElementById('sobrenome');

  if (nome.value == '') {
    nome.classList.add('errorInput')
    }else{
      nome.classList.remove('errorInput')
    }

  if (sobrenome.value == '') {
    sobrenome.classList.add('errorInput')
    }else{
      sobrenome.classList.remove('errorInput')    
    }  
  })

entre varios outros