🎯 Reto #5: Validador de formulario¶
Reto de nivel intermedio
Construye un formulario con validación en tiempo real usando la Constraint Validation API. Ideal para practicar formularios y accesibilidad.
🎯 Objetivo¶
Crea un formulario de registro con:
- Campos: email, contraseña, confirmar contraseña.
- Validación en tiempo real.
- Mensajes de error descriptivos.
- Accesibilidad (aria-invalid, aria-describedby).
- Que no se pueda enviar si hay errores.
🧠 Conceptos¶
- Constraint Validation API
- Eventos `input` y `blur`
- Accesibilidad
🖥️ Editor¶
Solución
```javascript const form = document.getElementById('registro'); const email = document.getElementById('email'); const password = document.getElementById('password'); const confirmar = document.getElementById('confirmar');
function validar(input, extra) { const error = document.getElementById(input.id + '-error'); if (!input.validity.valid) { error.textContent = mensaje(input); input.classList.add('invalido'); return false; } if (extra && extra()) { error.textContent = 'Las contraseñas no coinciden'; input.classList.add('invalido'); return false; } error.textContent = ''; input.classList.remove('invalido'); return true; }
function mensaje(input) { if (input.validity.valueMissing) return 'Este campo es obligatorio'; if (input.validity.typeMismatch) return 'Introduce un email válido'; if (input.validity.tooShort) return 'Mínimo ' + input.minLength + ' caracteres'; return 'Valor inválido'; }
[email, password, confirmar].forEach(input => { input.addEventListener('input', () => validar(input, input === confirmar ? () => password.value !== confirmar.value : null)); input.addEventListener('blur', () => validar(input)); });
form.addEventListener('submit', (e) => { e.preventDefault(); const ok = validar(email) && validar(password) && validar(confirmar, () => password.value !== confirmar.value); if (ok) alert('¡Registro exitoso!'); }); ```
🚀 Retos extra¶
- [ ] Indicador de fortaleza de contraseña.
- [ ] Términos y condiciones con checkbox.
- [ ] Medidor de progreso del formulario.