Atributos de validación de formularios
Aplique los atributos required, minlength, maxlength, pattern, min, max y step, y dé estilo a los estados de validación con las pseudo-clases :valid y :invalid.
Atributos de validación de formularios es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Validación nativa del navegador
HTML5 proporciona validación de formularios integrada mediante atributos. Cuando se envía un formulario, el navegador valida cada campo. Si la validación falla, muestra un aviso de error nativo e impide el envío; no se necesita JavaScript para los casos básicos.
required
Añadir required a una entrada, un select o un textarea los convierte en obligatorios. El navegador muestra un error si el campo está vacío al enviar el formulario.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength y maxlength
minlength impone un número mínimo de caracteres. maxlength impide introducir más caracteres que el máximo establecido. Combínelos para imponer la complejidad de las contraseñas o limitar la longitud de los comentarios.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max y step para entradas numéricas
min y max establecen el intervalo válido para las entradas de tipo number y date. step establece el incremento, lo que resulta útil para intervalos (5 %, precisión decimal y solo fechas).
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Validación mediante expresiones regulares
pattern acepta una expresión regular de JavaScript. La entrada debe coincidir con el patrón para que se pueda enviar el formulario. Incluya un title que describa el formato esperado en el aviso de error del navegador.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Desactivación de la validación nativa
Añada novalidate al elemento <form> para desactivar toda la validación nativa del navegador. Hágalo cuando implemente una validación personalizada con JavaScript para que el usuario tenga una experiencia coherente.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Comprobación de la validez en JavaScript
La Constraint Validation API le permite comprobar la validez mediante programación: input.validity (objeto ValidityState), input.checkValidity() (devuelve un booleano), input.setCustomValidity(message) (establece un error personalizado).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Llame a setCustomValidity(message) con una cadena no vacía para marcar un campo de entrada como no válido con un mensaje personalizado. Llámelo con una cadena vacía para borrar el error. Resulta útil para campos cuya validación depende del servidor, como comprobar si un nombre de usuario ya está en uso.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}Pseudo-clases :valid y :invalid
Estilice los campos de entrada válidos y no válidos con pseudo-clases CSS. Tenga cuidado: los campos de entrada son :invalid antes de que el usuario interactúe con ellos. Use :user-invalid (en navegadores modernos) o JavaScript para añadir primero una clase 'touched'.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Mensajes de error personalizados con reportValidity
form.reportValidity() activa la interfaz nativa de validación del navegador en todos los campos. Úselo después de establecer mensajes de validez personalizados para mostrárselos al usuario sin esperar a un evento de envío.
Patrón accesible para mostrar errores
Muestre los errores en línea mediante: 1) aria-invalid="true" en el campo de entrada, 2) un párrafo de error visible vinculado con aria-describedby, 3) mover el foco al primer campo no válido. Esto sirve para todos los usuarios, incluidos quienes utilizan lectores de pantalla.
Comprobación rápida
¿Qué atributo limita un campo de entrada de texto a un máximo de 280 caracteres?
Repaso: atributos de validación de formularios
required, minlength/maxlength, min/max/step, pattern — todos proporcionan validación nativa del navegador de forma gratuita. Use novalidate cuando implemente una validación personalizada con JavaScript. La Constraint Validation API proporciona a JavaScript acceso al estado de validez. Estilice los errores con :user-invalid después de que el usuario haya interactuado.
Preguntas frecuentes
¿La lección «Atributos de validación de formularios» es gratis?
Sí — el texto completo de «Atributos de validación de formularios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Atributos de validación de formularios»?
Aplique los atributos required, minlength, maxlength, pattern, min, max y step, y dé estilo a los estados de validación con las pseudo-clases :valid y :invalid. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Atributos de validación de formularios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Controles de formulario: tipos de input, select y textarea
- ARIA y accesibilidad: label, role y aria-*
- HTML5 semántico: elementos semánticos frente a div soup
- Atributos de validación de formularios