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