Estoy creando un formulario de varios pasos, utilizando principalmente JS.
Tengo un botón siguiente con un evento de clic. Que debería recorrer todos los campos y validarlos. Creo que puedo recorrer los campos y verificar si no están vacíos y/o coinciden con una expresión regular específica. Pero no tengo ni idea de cómo validar los botones de opción/casillas de verificación en un bucle.
Por ejemplo. Tengo 3 botones de opción que se pertenecen entre sí. Pero el selector de entradas piensa que hay 3 entradas. Lo cual es técnicamente cierto. Intenté usar la propiedad :checked , pero nuevamente, realmente no sabía cómo realizar esa acción en un bucle.
Y, por supuesto, en un paso específico, cuando falla la validación, debe devolver una variable con falso, para evitar que el script vaya al siguiente paso.
TL; DR: construyo un formulario de pasos, pero tengo problemas para hacer que la validación de entrada funcione por paso dentro de un bucle.
const nextBtn = document.getElementById('next'); const steps = document.querySelectorAll('steps'); let currentIndex = 0; nextBtn.addEventListener('click', (e) => { e.preventDefault(); const fields = steps[currentIndex].querySelectorAll('input'); steps[currentIndex].classList.add('hide'); steps[currentIndex++].classList.remove('hide'); }); .hide { display: none; } <div class="steps" id="step1"> <input type="text" name="fname" id="fname"> Option 1<input type="radio" name="options" id="option1" value="option1"> Option 2<input type="radio" name="options" id="option2" value="option2"> Option 3<input type="radio" name="options" id="option3" value="option3"> </div> <div class="steps hide" id="step2"> <input type="text" name="lname" id="lname"> Red<input type="checkbox" name="colors[]" id="red" value="red"> Blue<input type="checkbox" name="colors[]" id="blue" value="blue"> Green<input type="checkbox" name="options[]" id="green" value="green"> </div> <button id="next">Next</button>