¿Cómo se realiza la validación de formularios con HTML5?

HTML5 trajo consigo la validación de formularios integrada en el navegador, lo que te permite realizar comprobaciones básicas en los datos introducidos por el usuario antes de enviarlos al servidor. Esto mejora la experiencia de usuario al proporcionar retroalimentación inmediata.

La validación se realiza principalmente mediante atributos específicos en las etiquetas <input>, <select> y <textarea>:

1. required:
   Este atributo booleano indica que el campo debe ser rellenado obligatoriamente. Si un campo con required está vacío al intentar enviar el formulario, el navegador mostrará un aviso.
   <label for="nombre">Nombre (obligatorio):</label>
<input type="text" id="nombre" name="nombre_usuario" required>
2. Tipos de <input> específicos:
   Muchos tipos de input como email, url, number, date, time, etc., realizan una validación de formato básica automáticamente. Por ejemplo, <input type="email"> comprobará si el valor parece una dirección de correo electrónico válida.
   <label for="correo">Email:</label>
<input type="email" id="correo" name="usuario_email">
3. pattern:
   Permite definir una expresión regular que el valor del campo debe cumplir. Es muy potente para validar formatos personalizados (ej. códigos postales, nombres de usuario específicos).
   <label for="cp">Código Postal (5 dígitos):</label>
<input type="text" id="cp" name="codigo_postal" pattern="[0-9]{5}" title="Introduce 5 dígitos numéricos.">
   El atributo title es útil aquí para explicar el formato esperado al usuario si la validación falla.
4. min y max:
   Para campos de tipo number, range, date y otros tipos numéricos o de fecha, estos atributos especifican los valores mínimo y máximo permitidos.
5. step:
   Define los incrementos válidos para campos numéricos o de rango.
6. minlength y maxlength:
   Establecen la longitud mínima y máxima de caracteres para campos de tipo text, email, password, search, tel, o url.

¿Cómo funciona?

Cuando el usuario intenta enviar el formulario, el navegador comprueba estas reglas. Si alguna validación falla, el envío se detiene y el navegador suele mostrar un mensaje de error junto al primer campo inválido, además de poner el foco en él.

Personalización y anulación:

• Puedes personalizar los mensajes de error usando JavaScript y la API de validación de restricciones (Constraint Validation API), con métodos como setCustomValidity().
• Para desactivar la validación HTML5 por completo en un formulario, puedes añadir el atributo novalidate a la etiqueta <form>: <form novalidate>.

Importante: La validación HTML5 es una excelente mejora para la experiencia del usuario, pero siempre debes implementar validación en el lado del servidor. La validación del cliente puede ser eludida, por lo que la del servidor es crucial para la seguridad y la integridad de los datos.