Validación de formularios HTML: una guía completa

La validación del formulario garantiza que los usuarios proporcionen datos correctos y completos antes del envío. HTML5 proporciona un conjunto completo de atributos de validación que funcionan de forma nativa en todos los navegadores modernos, sin ningún JavaScript.

Esta guía cubre cada atributo de validación, cómo combinarlos y cuándo agregar una validación personalizada encima.

Atributos de validación HTML5

requerido

The required attribute prevents form submission when the field is empty:

1
<input type="text" name="name" required />

El navegador muestra una información sobre herramientas como "Complete este campo" cuando el usuario intenta enviar.

tipo

The input type attribute provides built-in format validation:

1
<input type="email" name="email" required />
2
<input type="url" name="website" />
3
<input type="number" name="quantity" min="1" max="100" />

longitud mínima y longitud máxima

Restringir el recuento de caracteres de las entradas de texto:

1
<input type="text" name="username" minlength="3" maxlength="30" required />
2
<textarea name="bio" minlength="10" maxlength="500"></textarea>

mín y máx

Restringir rangos numéricos:

1
<input type="number" name="age" min="18" max="120" />
2
<input type="date" name="appointment" min="2026-01-01" />
3
<input type="range" name="rating" min="1" max="5" />

paso

Controlar el incremento numérico entradas:

1
<input type="number" name="price" min="0" step="0.01" />
2
<input type="time" name="meeting" step="900" />

patrón

The pattern attribute accepts a JavaScript regular expression:

1
<input type="text" name="zip" pattern="[0-9]{5}" title="Enter a 5-digit ZIP code" required />

Always include a title attribute with pattern so the browser can show a helpful error message.

Patrones de validación comunes

Correo electrónico con restricción de dominio

1
<input
2
  type="email"
3
  name="email"
4
  pattern="^[^@\s]+@company\.com$"
5
  title="Use your @company.com email address"
6
  required
7
/>

Número de teléfono (internacional)

1
<input
2
  type="tel"
3
  name="phone"
4
  pattern="\+?[0-9\s\-\(\)]{7,20}"
5
  title="Enter a valid phone number"
6
/>

URL con protocolo

1
<input
2
  type="url"
3
  name="website"
4
  pattern="https?://.+"
5
  title="Enter a URL starting with http:// or https://"
6
/>

Seguridad de la contraseña

1
<input
2
  type="password"
3
  name="password"
4
  minlength="8"
5
  pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
6
  title="At least 8 characters with uppercase, lowercase, and a number"
7
  required
8
/>

Código postal de EE. UU.

1
<input
2
  type="text"
3
  name="zip"
4
  pattern="[0-9]{5}(-[0-9]{4})?"
5
  title="Enter a 5-digit or 9-digit ZIP code"
6
/>

Aplicar estilo a los estados de validación con CSS

Los navegadores aplican pseudoclases a las entradas según su estado de validación:

1
input:valid {
2
  border-color: #22c55e;
3
}
4

5
input:invalid {
6
  border-color: #ef4444;
7
}
8

9
input:required {
10
  border-left: 3px solid #059669;
11
}
12

13
input:user-invalid {
14
  border-color: #ef4444;
15
  background: #fef2f2;
16
}

The :user-invalid pseudo-class (supported in modern browsers) only applies after the user has interacted with the field, avoiding red borders on page load.

Validación personalizada con JavaScript

Para una lógica de validación que vaya más allá de lo que los atributos HTML pueden expresar, utilice la API de validación de restricciones:

1
const email = document.getElementById("email");
2

3
email.addEventListener("input", () => {
4
  if (email.validity.typeMismatch) {
5
    email.setCustomValidity("Please enter a valid email address.");
6
  } else if (email.value && !email.value.endsWith("@company.com")) {
7
    email.setCustomValidity("Only @company.com addresses are allowed.");
8
  } else {
9
    email.setCustomValidity("");
10
  }
11
});

Call setCustomValidity("") with an empty string to clear the error and mark the field as valid.

Comprobar la validez antes del envío

1
document.querySelector("form").addEventListener("submit", (e) => {
2
  const form = e.target;
3
  if (!form.checkValidity()) {
4
    e.preventDefault();
5
    form.reportValidity();
6
  }
7
});

Deshabilitar la validación nativa

Para deshabilitar la validación HTML5 por completo (útil al implementar una interfaz de usuario de validación personalizada):

1
<form novalidate>
2
  <!-- fields -->
3
</form>

With novalidate, the form submits regardless of validation state. You handle all validation in JavaScript.

Validación del lado del servidor

La validación del lado del cliente mejora la experiencia del usuario, pero se puede omitir. Valide siempre también en el servidor o en el backend de formularios:

• Verificación de tipo: Asegúrese de que los campos de correo electrónico contengan correos electrónicos válidos
• Límites de longitud: Aplique longitud máxima en el lado del servidor
• Validación de archivos: Verifique los tipos MIME, tamaños de archivos y escaneo en busca de malware
• Restricciones de dominio: Solo se aceptan envíos de orígenes permitidos
• Limitación de velocidad: evite el abuso desde una sola IP

Un servicio de backend de formularios como FormsFort maneja la validación del lado del servidor automáticamente, incluida la verificación de tipos MIME, el escaneo de archivos y la aplicación de restricciones de dominio.

Consideraciones de accesibilidad

• Always associate <label> elements with inputs using the for attribute
• Use aria-describedby to link error messages to their fields
• Use aria-invalid="true" on fields that fail validation
• Use aria-live="polite" on error message containers so screen readers announce changes

1
<label for="email">Email</label>
2
<input type="email" id="email" name="email" required aria-describedby="email-error" />
3
<span id="email-error" role="alert" aria-live="polite"></span>

Resumen

HTML5 provides a complete validation system that works without JavaScript. Use required, type, pattern, minlength, maxlength, min, max, and step to validate most form inputs. Style validation states with CSS pseudo-classes. Add custom JavaScript validation with the Constraint Validation API when HTML attributes are not sufficient. Always enforce validation on the server side or through your form backend service.