CodeAventura
JavaScript en el DOM
▸Formularios y validación▸Validación nativa de formularios

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 nativa</title>
  </head>
  <body>
    <form id="form-registro">
      <input id="nombre" name="nombre" type="text" required minlength="3" placeholder="Nombre" />
      <input id="correo" name="correo" type="email" required placeholder="Correo" />
      <button type="submit">Enviar</button>
    </form>
    <p id="estado-validacion">Pendiente</p>

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

Validación nativa de formularios

No subestimes la validación del navegador

Antes de escribir lógica personalizada, aprovecha lo que HTML ya ofrece de serie. Con los atributos correctos, el navegador valida automáticamente sin que escribas una sola línea de JavaScript.

Atributos de validación HTML

required

El campo no puede estar vacío:

minlength / maxlength

Define la longitud mínima o máxima del texto:

type="email" / type="url" / type="number"

El navegador valida el formato automáticamente:

pattern

Valida contra una expresión regular:

APIs de validación desde JavaScript

Una vez tienes esos atributos, puedes controlar el flujo desde JS con dos métodos clave.

checkValidity()

Devuelve true si el formulario es válido, false si no. No muestra ningún mensaje, solo comprueba.

reportValidity()

Igual que checkValidity, pero además muestra los mensajes de error nativos del navegador al usuario.

Combinar ambos métodos

Una práctica habitual es usar checkValidity() para decidir qué hacer, y reportValidity() solo para informar al usuario cuando hay errores:

Beneficio profesional

La validación nativa:

  • elimina código manual repetitivo
  • mejora la accesibilidad (los lectores de pantalla leen los mensajes)
  • es consistente entre dispositivos y formularios

Luego, sobre esta base, puedes añadir reglas personalizadas para casos que HTML no cubre.

Tu desafío 🚀

  1. El formulario ya tiene atributos de validación
  2. Escucha el submit
  3. Evalúa checkValidity() al enviar
  4. Si no es válido, llama reportValidity()
  5. Si es válido, escribe Formulario válido en #estado-validacion

Validar bien no es molestar al usuario: es guiarlo con precisión.