Cómo utilizar Javascript para crear formas multi-paso con validación

También puede añadir un indicador del progreso] (por ejemplo, números de paso o una barra de progreso) para mostrar a los usuarios dónde están y cuánto queda.

Construyendo el Shell HTML

Comience con una estructura HTML limpia. Cada paso es un con una clase de ]. Sólo el primer paso es visible por defecto; los otros están ocultos con .

<form id="multiStepForm">
 <!-- Step 1: Personal Information -->
 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 2: Contact Details -->
 <div class="step" id="step2" style="display:none">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email Address</label>
 <input type="email" id="email" name="email" required />
 <label for="phone">Phone Number</label>
 <input type="tel" id="phone" name="phone" />
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 3: Confirmation -->
 <div class="step" id="step3" style="display:none">
 <h3>Step 3: Review & Submit</h3>
 <p>Please review your information before submitting.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
</form>

Importante:] Usar para botones de navegación para evitar la presentación accidental de formularios. Sólo el botón "Enviar" final debe tener .

CSS: Gestión de la visibilidad y el estilo

En lugar de confiar en la inline , es más limpio utilizar clases de CSS. Agregue lo siguiente a su hoja de estilo:

.step {
 display: none;
}
.step.active {
 display: block;
}

Luego en el HTML, eliminar los atributos inline y sólo añadir ] al primer paso. JavaScript cambiará la clase para mostrar/hierrar pasos.

También puede agregar transiciones, barras de progreso y espaciado consistente. Por ejemplo:

.step {
 opacity: 0;
 transition: opacity 0.3s ease;
}
.step.active {
 opacity: 1;
 display: block;
}

Esto crea un efecto de fade-in suave cuando se cambian los pasos.

JavaScript: Navegación y validación

Ahora escribiremos la lógica central: moverse entre pasos, validando los campos de cada paso, y actualizando la interfaz de usuario.

Selección de elementos DOM

const steps = document.querySelectorAll('.step');
const nextBtns = document.querySelectorAll('.next-btn');
const prevBtns = document.querySelectorAll('.prev-btn');
let currentStep = 0; // index of the currently visible step

Funciones de navegación

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

function nextStep() {
 if (validateStep(currentStep)) {
 showStep(currentStep + 1);
 }
}

function prevStep() {
 showStep(currentStep - 1);
}

Validación por paso

Escribe una función que comprueba todos los campos requeridos en el paso actual y muestra mensajes de error. Para la simplicidad, usaremos en este ejemplo, pero un formulario de producción debe mostrar mensajes de error en línea junto a los campos.

function validateStep(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input[required]');

 for (let input of inputs) {
 if (!input.value.trim()) {
 alert(`Please fill in "${input.placeholder || input.name}".`);
 input.focus();
 return false;
 }
 // Additional validation per type can be added here
 if (input.type === 'email' && !isValidEmail(input.value)) {
 alert('Please enter a valid email address.');
 input.focus();
 return false;
 }
 }
 return true;
}

function isValidEmail(email) {
 const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return re.test(email.trim());
}

Acoplamiento de los oyentes del evento

nextBtns.forEach(btn => btn.addEventListener('click', nextStep));
prevBtns.forEach(btn => btn.addEventListener('click', prevStep));

Nota:] Esto supone que cada paso tiene exactamente un botón "Siguiente" y un botón "Anterior". Para formas más complejas, es posible que desee utilizar atributos de datos (por ejemplo, ) para mapear botones a pasos específicos.

Técnicas de validación avanzada

Aunque los controles básicos necesarios para el campo son esenciales, las formas modernas se benefician de una validación más sofisticada que mejora la experiencia del usuario y la calidad de los datos.

Validación de circuncisión HTML5

Los navegadores modernos apoyan la validación integrada para , , , , etc. Puedes aprovechar el método y el pseudoclase para el estilo.

function validateStepHTML5(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input, select, textarea');

 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity(); // shows the browser's native error tooltip
 return false;
 }
 }
 return true;
}

Validación de línea en tiempo real

Para dar a los usuarios retroalimentación inmediata como escriben, escuchen o eventos en campos individuales. Por ejemplo:

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
 if (this.value && !isValidEmail(this.value)) {
 this.classList.add('invalid');
 // show an error message next to the field
 } else {
 this.classList.remove('invalid');
 }
});

Validación de Regex a medida

Para campos como números de teléfono, códigos postales o contraseñas, utilice atributos o regex personalizado. Ejemplo para un número de teléfono de EE.UU. (10 dígitos):

<input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" />

Luego en JavaScript, puede comprobar o probar el valor con su propio reex.

Añadiendo un indicador de progreso

Una barra de progreso o un contador de pasos ayuda a los usuarios a entender cuántos pasos quedan y reduce la ansiedad. Aquí está una implementación simple usando JavaScript y CSS.

Estructura HTML para pasos de progreso

<div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
</div>

CSS Styling

.progress-step {
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 border-radius: 50%;
 background: #ccc;
 color: #fff;
}
.progress-step.active {
 background: #007bff;
}

Actualización de JavaScript

Dentro de la función , también se actualizan los indicadores de progreso:

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 document.querySelectorAll('.progress-step').forEach((el, index) => {
 el.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

También puede añadir una barra de progreso lineal calculando el porcentaje: y estableciendo el ancho de un .

Manejo de casos de borde y datos de experiencia de usuario

Para construir una forma multi-paso lista para la producción, considere estos aspectos adicionales:

Navegación de teclado

Los usuarios deben poder avanzar con la tecla Enter] (trigger the “Next” button) y atrasados con Escape] o un atajo dedicado. Asegúrese de que todos los botones y campos sean enfocables y el orden de pestaña es lógico.

document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
});

Prevención de múltiples comunicaciones

Desactiva el botón de envío después del primer clic para evitar las presentaciones de formulario duplicados:

const submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function() {
 this.disabled = true;
 this.textContent = 'Submitting…';
 // The form will submit naturally after this
});

Recuperar datos temporalmente

Si el usuario renueva accidentalmente la página, pierde todos los datos introducidos. Considere almacenar los valores de campo en o mientras el usuario progresa. En la carga de la página, restaurar los valores y saltar al último paso guardado.

Consideraciones de seguridad

La validación de cliente es sólo para la experiencia del usuario; siempre valida y sanita los datos en el servidor. Usa HTTPS y considera agregar fichas CSRF para formas sensibles.

Accesibilidad (A11y) Buenas Prácticas

Las formas multi-paso pueden ser difíciles para los usuarios de la pantalla si no se codifican correctamente.

• Use y para agrupar cada paso lógicamente.
• Anuncio cambios de paso utilizando Regiones vivas de la agenda] (por ejemplo, ) por lo que los lectores de pantalla saben que apareció un nuevo contenido.
• Añada al paso actual del progreso.
• Asegúrese de que los mensajes de error estén asociados programáticamente con los campos de entrada (utilizar ).
• Asegúrese de que todos los elementos interactivos sean accesibles al teclado y tengan indicadores de enfoque visibles.

<div class="step active" id="step1" aria-live="polite">
 <h3>Step 1 of 3: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <span id="name-error" class="error" role="alert"></span>
</div>

Cuando la validación falla, inserte el mensaje de error en el y será anunciado.

Traer todo juntos: un ejemplo completo

A continuación se muestra una versión condensada de una forma multi-paso totalmente funcional con validación y un indicador de progreso. Puede adaptar esta estructura a sus propios proyectos.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Multi‑Step Form with Validation</title>
 <style>
 .step { display: none; }
 .step.active { display: block; }
 .progress-step { background: #ccc; padding: 5px 10px; margin: 0 2px; }
 .progress-step.active { background: #007bff; color: #fff; }
 .error { color: red; font-size: 0.9em; }
 </style>
</head>
<body>
 <form id="multiStepForm" novalidate>
 <div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
 </div>

 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name *</label>
 <input type="text" id="name" name="name" required minlength="2">
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step2">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email *</label>
 <input type="email" id="email" name="email" required>
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step3">
 <h3>Step 3: Submit</h3>
 <p>Review your details and submit.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
 </form>

 <script>
 const steps = document.querySelectorAll('.step');
 const nextBtns = document.querySelectorAll('.next-btn');
 const prevBtns = document.querySelectorAll('.prev-btn');
 const progressSteps = document.querySelectorAll('.progress-step');
 let currentStep = 0;

 function showStep(index) {
 steps.forEach((step, i) => step.classList.toggle('active', i === index));
 progressSteps.forEach((step, i) => step.classList.toggle('active', i === index));
 currentStep = index;
 }

 function validateCurrentStep() {
 const stepDiv = steps[currentStep];
 const inputs = stepDiv.querySelectorAll('input[required]');
 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity();
 return false;
 }
 }
 return true;
 }

 nextBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 if (validateCurrentStep()) {
 showStep(currentStep + 1);
 }
 });
 });

 prevBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 showStep(currentStep - 1);
 });
 });

 // Optional: handle Enter key
 document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
 });
 </script>
</body>
</html>

Este ejemplo utiliza validación HTML5 () y los mensajes de error incorporados. Puede reemplazar por formato de error personalizado si es necesario.

Lectura y recursos adicionales

Para profundizar su comprensión de la validación de la forma y la accesibilidad, revise estos recursos:

• MDN: Validación de formulario de cliente-Side
• WAI Web Accessibility Tutorials: Multi‐Page Forms
• MDN: ARIA Live Regions
• Directus Blog: Building Better Forms (para ideas de integración en el backend)

Agitando

Las formas multi-paso construidas con JavaScript son una herramienta poderosa para mejorar la experiencia de usuario y la exactitud de los datos. Al romper una forma larga en secciones manejables, validar la entrada a cada paso y proporcionar cues de progreso visual, puede reducir drásticamente el abandono de la forma y recopilar datos más limpios.

Comience con una estructura HTML sólida, capa en CSS para comentarios visuales, y luego agregue JavaScript para navegación y validación. Amplíe su forma con validación en tiempo real, indicadores de progreso y características de accesibilidad para que sea utilizable para todos. Finalmente, recuerde siempre que la validación del lado cliente es una comodidad – nunca confía en ella sola. Valida todos los datos en el servidor también.

Experimente con diferentes diseños y técnicas de validación para satisfacer las necesidades de su aplicación. Las técnicas mostradas aquí proporcionan una base que puede adaptarse y extender para cualquier proyecto de forma multi-paso.