Validación nativa
HTML tiene un sistema de validación que el navegador aplica automáticamente al intentar enviar el formulario, sin necesidad de JavaScript. Cuando un campo no cumple la restricción, el navegador muestra un mensaje de error nativo y previene el envío.
Este es uno de los puntos más valiosos del módulo: podés construir formularios con validación real sin escribir una línea de JS.
required — campo obligatorio
El formulario no se envía si el campo está vacío.
<!-- required: el nombre es obligatorio -->
<label for="nombre">Nombre *</label>
<input type="text" id="nombre" name="nombre" required>required es un atributo booleano — su presencia activa la restricción, no su valor. required, required="" y required="required" son equivalentes.
min y max — valor mínimo y máximo
Aplican a <input type="number"> (y también a tipos de fecha, que van a Referencia).
<!-- Edad entre 18 y 99 -->
<label for="edad">Edad</label>
<input type="number" id="edad" name="edad" min="18" max="99">Importante: min y max no tienen efecto en <input type="text">. El tipo del campo debe ser number para que las restricciones numéricas funcionen.
minlength y maxlength — longitud mínima y máxima
Aplican a campos de texto: text, email, password y <textarea>.
<!-- Contraseña de 8 a 20 caracteres -->
<input type="password" id="pass" name="pass" minlength="8" maxlength="20">
<!-- Mensaje de hasta 300 caracteres -->
<textarea id="mensaje" name="mensaje" maxlength="300"></textarea>pattern — expresión regular
El valor del campo debe coincidir con la expresión regular indicada. Permite validaciones de formato muy específicas.
<!-- Solo letras (sin números ni símbolos) -->
<input type="text" id="nombre" name="nombre" pattern="[A-Za-záéíóúÁÉÍÓÚñÑ\s]+" required>Si el valor no coincide con el patrón, el navegador muestra un mensaje de error al intentar enviar.
Tabla resumen
| Atributo | Aplica a | Qué restringe |
|---|---|---|
required | todos los controles | campo no puede estar vacío |
minlength="N" | text, email, password, textarea | mínimo N caracteres |
maxlength="N" | text, email, password, textarea | máximo N caracteres |
min="N" | number (y date/time en Referencia) | valor numérico mínimo |
max="N" | number (y date/time en Referencia) | valor numérico máximo |
pattern="regex" | text, email, password | formato según expresión regular |
La validación del lado cliente es UX, no seguridad
La validación nativa mejora la experiencia del usuario: el error aparece inmediatamente, sin esperar respuesta del servidor. Pero no es una medida de seguridad — el usuario puede desactivarla, modificar el DOM, o hacer una petición directa al servidor omitiendo el formulario. El backend siempre debe revalidar los datos por su cuenta.
En el sandbox el formulario no se envía y la validación no se dispara, pero el check confirma que tu marcado es correcto; en un navegador real con servidor funcionaría. Podés escribir valores inválidos en el preview y ver cómo el navegador reacciona visualmente, pero el envío no ocurre porque no hay servidor.
Tu turno: el starter tiene el formulario de contacto sin los atributos de validación. Completá cada campo según el enunciado sin cambiar id ni name. Luego hacé clic en “Comprobar”.
Validación nativa
El siguiente formulario de contacto está incompleto: le faltan las restricciones de validación. Completá los atributos para que: 1. El campo `nombre` sea **obligatorio** y tenga una longitud mínima de **2 caracteres**. 2. El campo `correo` sea **obligatorio** y sea de tipo `email`. 3. El campo `edad` sea de tipo `number`, sea **obligatorio**, y acepte solo valores entre **18** y **99**. 4. El campo `mensaje` (textarea) sea **obligatorio** y tenga una longitud máxima de **300 caracteres**. No cambies los `id` ni los `name` existentes. > En el sandbox el formulario no se envía y la validación no se dispara, pero el check confirma que tu marcado es correcto; en un navegador real con servidor funcionaría.
Preview