const formSteps = [...multiStepForm.querySelectorAll("[data-step]")] let currentStep = formSteps.findIndex(step => { return step.classList.contains("active") }) if (currentStep < 0) { currentStep = 0 showCurrentStep() } multiStepForm.addEventListener("click", e => { let incrementor if (e.target.matches("[data-next]")) { incrementor = 1 } else if (e.target.matches("[data-previous]")) { incrementor = -1 } if (incrementor == null) return const inputs = [...formSteps[currentStep].querySelectorAll("input")] const allValid = inputs.every(input => input.reportValidity()) if (allValid) { currentStep += incrementor showCurrentStep() } }) formSteps.forEach(step => { step.addEventListener("animationend", e => { formSteps[currentStep].classList.remove("hide") e.target.classList.toggle("hide", !e.target.classList.contains("active")) }) }) function showCurrentStep() { formSteps.forEach((step, index) => { step.classList.toggle("active", index === currentStep) }) }

En este caso de código no funciona la validación de la entrada de datos y luego no funciona la incriminación para los demás pasos. También traté de agregar requerido en las entradas ignorando este código, el problema es que al hacer un "anterior", el usuario no tiene la posibilidad de volver bloqueado por el requerido insertado.

En el código el objeto incrementor ya es nulo, visto en log.console no lo ve. Creo que el problema en este caso es la selección de consulta, ya que noté en log.console que toma datos que no me interesan.