Learn HTML & CSSValidación de formularios
Un formulario recopila datos que las personas ingresan, y las personas dejan campos vacíos, escriben mal un correo o meten letras donde debería ir un número. No quieres que esos datos lleguen a tu código sin ningún filtro. Antes de que se envíe cualquier cosa, el navegador puede revisar buena parte de eso por ti, pero solo si le describes qué espera cada campo. Esa descripción se escribe directamente en tu HTML, y este capítulo trata de cómo escribirla.
Campos obligatorios y tipos de entrada
Las dos comprobaciones más baratas que puedes agregar son indicar que un campo debe llenarse sí o sí, y decir qué tipo de valor le corresponde.
Agrega la palabra required a un input y el navegador se niega a enviar el formulario hasta que ese campo tenga algo escrito. No necesitas escribir ningún código para que esto funcione. El atributo mismo es la instrucción.
<input type="text" name="full_name" required>La otra mitad es el atributo type. Le indica al navegador qué forma debería tener el valor, y el navegador lo revisa por ti. Usa type="email" y el navegador se asegura de que el valor parezca un correo electrónico. Usa type="number" y solo acepta números. Hay un tipo para fechas, uno para direcciones web, y más.
Piénsalo como un formulario en el consultorio de un médico donde algunas casillas están marcadas como "obligatorio llenar" y la casilla de fecha ya tiene espacios separados para día, mes y año. El papel te dice qué va en cada lugar antes de que escribas algo.
Aquí hay un pequeño formulario de registro que usa ambos atributos:
<form>
<label>
Correo electrónico
<input type="email" name="email" required>
</label>
<label>
Sitio web
<input type="url" name="website">
</label>
<button>Registrarse</button>
</form>El campo de correo debe llenarse y debe parecer un correo electrónico. El campo del sitio web es opcional, pero si alguien escribe algo, tiene que parecer una dirección web. El navegador revisa ambos en el momento en que se presiona el botón.
required en un campo y el navegador no dejará pasar uno vacío. Define el type, como email o number, y revisa que el valor tenga la forma correcta. Elige el tipo que corresponda al campo y obtienes validación gratis. Atributos de restricción
Más allá de "lleno" y "tipo correcto", muchas veces quieres poner límites: un valor de al menos cierta longitud, un número que no supere cierto tope, un código con un formato específico. Un puñado de atributos cubren esto.
Puedes poner límites a lo que acepta un campo. Dos que son útiles para empezar:
<input type="text" name="username" maxlength="20">
<input type="number" name="quantity" min="1" max="10">maxlength="20" detiene el campo una vez que tiene veinte caracteres. min y max fijan el número más pequeño y el más grande permitidos. El navegador mantiene a las personas dentro de esos límites, así que tú no tienes que revisarlo por tu cuenta.
La regla que ahorra más confusiones: un pattern debe coincidir con el valor completo, no solo con una parte de él.
<input
type="text"
name="product_code"
pattern="[A-Z]{2}-[0-9]{3}"
title="Dos letras, un guion, tres dígitos, por ejemplo AB-123"
required
>maxlength limita cuántos caracteres entran, y min y max encierran un número entre dos valores. El navegador mantiene a las personas dentro de esos límites automáticamente, y eso es mucha validación que nunca tienes que escribir. Retroalimentación nativa de validación
Declarar las reglas es solo la mitad de la historia. La otra mitad es lo que ve la persona cuando un valor rompe alguna de ellas.
Cuando alguien presiona el botón de enviar y un campo está mal, el navegador detiene el envío y muestra un pequeño mensaje junto al primer campo con problemas, y luego mueve el cursor hacia él. Tú no construyes ese mensaje. El navegador lo escribe, en el idioma de la persona que visita la página, y lo muestra automáticamente.
Así que un campo de correo required que quedó vacío produce algo como "Por favor completa este campo", y el formulario no se envía hasta que se corrija.
Cuándo todavía necesitas JavaScript
La validación nativa revisa un campo contra sus propias reglas. Muchas revisiones reales no caben en ese molde, y ahí es donde entra JavaScript.
Hay cosas que el navegador no puede revisar por su cuenta. Si dos campos de contraseña coinciden entre sí. Si un nombre de usuario ya lo tiene otra persona. Si un código de descuento es real. Ninguna de estas tiene que ver con la forma de un solo campo, así que no existe un atributo para ellas, y ahí recurres a JavaScript para hacer la validación.
Eso no es una falla de HTML. Las validaciones incorporadas cubren los casos comunes sin necesidad de código, y JavaScript se encarga del resto.