CodeAventura
JavaScript en el DOM
▸Formularios y validación▸Validación personalizada

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Validación personalizada</title>
  </head>
  <body>
    <form id="form-password">
      <input id="password" name="password" type="password" placeholder="Mínimo 8 caracteres" />
      <button type="submit">Crear cuenta</button>
    </form>

    <p id="error" style="color: #b00020;"></p>
    <p id="ok" style="color: #1b5e20;"></p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
16 / 16Validación personalizada
Anterior

Validación personalizada

Cuando lo nativo no alcanza

Los atributos HTML cubren casos básicos: campo requerido, formato de email, longitud mínima. Pero hay reglas de negocio que no pueden expresarse en HTML, por ejemplo:

  • la contraseña debe contener al menos una letra mayúscula
  • los dos campos de contraseña deben coincidir
  • el nombre de usuario no puede contener caracteres especiales
  • una fecha debe ser futura, no pasada

Para esos casos, escribes tu propia lógica de validación en JavaScript.

Patrón de implementación

Múltiples reglas: valida en orden

Cuando tienes varias condiciones, evalúalas una a una y sal en cuanto falle alguna:

Buenas prácticas de UX en validación

Mensajes específicos y accionables:

Limpiar errores cuando el usuario corrige:

Mostrar el feedback en el lugar correcto: El mensaje de error debe aparecer cerca del campo donde ocurrió el problema, no en un lugar genérico de la página.

Combinar validación nativa y personalizada

La estrategia más sólida es usar las dos en capas:

  1. HTML valida lo que puede (required, type, minlength)
  2. JavaScript valida lo que no puede expresarse en HTML

Tu desafío 🚀

  1. Escucha el submit de #form-password
  2. Evita el envío por defecto
  3. Valida que la contraseña tenga al menos 8 caracteres
  4. Muestra el error en #error o el mensaje de éxito en #ok
  5. Limpia el mensaje contrario en cada caso (si hay error, borra el ok y viceversa)

La validación personalizada convierte un formulario funcional en una experiencia profesional.