Tutorial: valida un formulario con JavaScript

El navegador ya valida algunas cosas solas (required, type="email"), pero para mensajes de error personalizados necesitas JavaScript. Vamos a validar un formulario de registro simple.

Paso 1: el HTML

<form id="formulario">
  <input type="text" id="usuario" placeholder="Nombre de usuario" />
  <input type="password" id="clave" placeholder="Contraseña" />
  <button type="submit">Registrarse</button>
  <p id="error" style="color: #ff6b6b;"></p>
</form>

Paso 2: escucha el evento submit

const formulario = document.querySelector('#formulario');
const error = document.querySelector('#error');

formulario.addEventListener('submit', (evento) => {
  evento.preventDefault();
  error.textContent = '';

  const usuario = document.querySelector('#usuario').value;
  const clave = document.querySelector('#clave').value;

  if (usuario.length < 3) {
    error.textContent = 'El usuario debe tener al menos 3 caracteres.';
    return;
  }

  if (clave.length < 6) {
    error.textContent = 'La contraseña debe tener al menos 6 caracteres.';
    return;
  }

  console.log('Formulario válido, enviando...');
});

evento.preventDefault() evita que la página se recargue (el comportamiento por defecto de un formulario). Sin esa línea, tu mensaje de error aparecería y desaparecería en una fracción de segundo, y pensarías que tu código no funciona cuando en realidad el navegador te está "ayudando" de más.

Paso 3: valida mientras el usuario escribe (opcional, para nota extra)

document.querySelector('#clave').addEventListener('input', (evento) => {
  const valor = evento.target.value;
  error.textContent =
    valor.length > 0 && valor.length < 6
      ? 'Muy corta todavía...'
      : '';
});

El evento input se dispara cada vez que el usuario teclea algo. Esto te permite dar retroalimentación instantánea en vez de esperar a que intenten enviar el formulario.

¿Qué acabas de aprender?

• Cómo escuchar el evento submit y evitar el recargado de página con preventDefault().
• Cómo validar valores con condicionales simples.
• Cómo dar retroalimentación en tiempo real con el evento input.