Validar formularios HTML de forma Nativa sin JavaScript

La validación de formularios es una parte básica para cualquier proyecto Web, se pueden usar librerías externas hechas con JavaScript, pero si quieres lograr un mejor rendimiento puedes usar los atributos de HTML de forma nativa.

Validación nativa de formularios

La validación nativa permite verificar que los datos introducidos por los usuarios cumplan con ciertos requisitos antes de ser enviados al servidor. Esto se logra mediante atributos específicos en los elementos del formulario. HTML incluye validaciones básicas como:

Campos requerido u obligatorios.
Campos con formato de correo electrónico.
Campos de texto con longitud mínima y máxima.
Campos numéricos con valores dentro de rangos específicos.
Campos de selección de una opción en listas desplegables o casillas.
Campos que cumplan una determinada expresión regular

Atributos para validación

Para la validación de formularios están disponibles los siguientes atributos:

Atributo
`required`	Indica que un campo es obligatorio.
`type="email"`	Verifica que el texto tenga formato de email.
`type="number"`	Acepta solo valores numéricos.
`type="url"`	Verifica que el texto tenga formato de URL.
`type="url"`	Verifica que el texto tenga formato de URL.
`type="date"`	Abre un selector de fecha y valida el formato.
`min` y `max`	Define valores mínimos y máximos para campos numéricos o fechas.
`maxlength` y `minlength`	Establece la longitud mínima o máxima de caracteres permitidos.
`pattern`	Permite usar expresiones regulares para formatos específicos.

Luego, si queremos que un campo sea obligatorio:


<label for="name">Nombres</label>
<input type="text" id="name" name="name" required>

Si tenemos un campo fecha requerido y que sólo acepte fechas del 2024:


<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha" min="2024-01-01" max="2024-12-31" required>

Para validar que un campo teléfono tenga el formato (XXX) XXX-XXXX podemos usar:


<label for="phone">Teléfono</label>
<input type="text" id="phone" pattern="^\(\d{3}\) \d{3}-\d{4}$" placeholder="(XXX) XXX-XXXX">

Aplicando estilos

Podemos mejorar la interfaz agregando estilos para indicar cuando un campo tiene un error o si hay campos obligatorios, para ello usamos las pseudo-clases:

:valid Aplica estilos a los campos que cumplen con los requisitos de validación.
:invalid Se aplica a los campos que no cumplen los requisitos de validación.
:required Estiliza los campos marcados como obligatorios.
:in-range Indica que el valor está dentro del rango permitido.
:out-of-range Indica que el valor no está dentro del rango permitido.

Luego podemos crear los estilos para validación.


input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { background-color: #f9f9f9; }

input:in-range { border-color: blue; }
input:out-of-range { border-color: orange; }

Además podemos agregar un indicador en los labels de los campos que son obligatorios.


label:has(+ input:required):after { content: '*'; color: red; }

Ejemplo completo

Ahora que conocemos los atributos para validar formularios y las pseudo-clases para indicar cuando hay errores podemos unir todo y crear nuestro formulario con la validación nativa:


<html>
<head>
  <title>Formulario</title>
  <style>
      input:valid { border-color: blue; }
      input:invalid { border-color: red; }
      input:required { background-color: #f9f9f9; }

      input:in-range { border-color: blue; }
      input:out-of-range { border-color: red; }

      label:has(+ input:required):after { content: '*'; color: red; }
  </style>
</head>
<body>
<section>
    <h3>Formulario</h3>

    <form id="formRegister">
      <label for="fecha">Fecha</label>
      <input type="date" id="fecha" name="fecha" min="2024-01-01" max="2024-12-31" required>

      <label for="name">Nombre</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

      <label for="phone">Teléfono</label>
      <input type="text" id="phone" name="phone" pattern="^\(\d{3}\) \d{3}-\d{4}$"
          required placeholder="(XXX) XXX-XXXX" maxlength="14">

      <button type="submit">Enviar</button>
    </form>
  </div>
</section>
</body>
</html>

Con lo que obtenemos el siguiente resultado.

Consideraciones

Entre las ventajas de la validación nativa tenemos: se puede implementar usando solamente HTML, funciona en la mayoría de los navegadores, los navegadores manejan el foco de los campos y los mensajes de error.

Respecto a las limitaciones:

Los mensajes de error no se pueden personalizar y dependen de cada navegador.
Para reglas avanzadas, como verificar contraseñas o condiciones dependientes entre campos, se necesita JavaScript.

Conclusión

La validación nativa de formularios garantiza la calidad de los datos ingresados por los usuarios. Es fácil de usar para validaciones básicas, sin embargo, para casos complejos se requiere usar JavaScript.