HTML Academy · Lección

El atributo novalidate

Desactive la validación del navegador cuando la gestione usted mismo

El atributo novalidate es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Limitaciones de la validación del navegador

La validación integrada de HTML5 tiene algunas limitaciones:

Los mensajes de error dependen del navegador y son difíciles de personalizar con estilos
La validación solo se ejecuta al enviar el formulario, no al perder el foco ni al introducir datos
No es posible aplicar reglas de negocio complejas, como comprobar que coincidan dos contraseñas o que un nombre de usuario sea único

Cuando necesite control total, desactive la validación integrada con novalidate.

novalidate en el formulario

Al añadir novalidate a un formulario, se desactiva toda la validación del navegador:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

¿Por qué usar novalidate?

Motivos habituales para desactivar la validación del navegador:

Personalizar los estilos de los mensajes de error para que coincidan con su sistema de diseño
Validar en tiempo real, al perder el foco o introducir datos, y no solo al enviar el formulario
Validar varios campos, por ejemplo, la confirmación de una contraseña
Mostrar errores del servidor después de una redirección
Usar bibliotecas de validación de terceros, como Zod, Yup o React Hook Form

Patrón de validación personalizada

Construya una validación personalizada con novalidate:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate en un botón

Desactive la validación para un botón de envío específico sin usar novalidate en todo el formulario:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Estilos para errores personalizados

Estilos para errores de validación personalizados:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Errores personalizados accesibles

Haga que los mensajes de error personalizados sean accesibles:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Estrategias para el momento de la validación

Cuándo validar con novalidate:

Al enviar — es la opción más sencilla; valida todo de una vez
Al perder el foco — valida cada campo cuando el usuario sale de él
Al introducir datos — en tiempo real; ofrece la mejor experiencia de usuario, pero puede resultar demasiado insistente
Híbrida — valida al perder el foco y elimina los errores al introducir datos

Patrón híbrido al perder el foco y al introducir datos

El enfoque de validación más fácil de usar:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate y validación del servidor

Valide siempre también en el servidor:

La validación del lado del cliente mejora la experiencia de usuario
La validación del lado del servidor proporciona seguridad
Los usuarios pueden eludir la validación de HTML modificando las solicitudes
novalidate y la validación personalizada con JavaScript deben reflejar las reglas del servidor

Bibliotecas de validación

Bibliotecas populares de validación de JavaScript que funcionan junto con novalidate:

Zod — validación de esquemas orientada a TypeScript
Yup — validación de esquemas de objetos
Valibot — biblioteca ligera de esquemas
React Hook Form — estado y validación de formularios para React

Probar la validación personalizada

Cómo probar la validación personalizada de formularios:

Pruebe el envío de un formulario vacío, con campos obligatorios
Pruebe formatos no válidos, como un correo electrónico incorrecto o un patrón telefónico erróneo
Pruebe casos límite, como solo espacios, Unicode y cadenas muy largas
Pruebe con un lector de pantalla para verificar que los errores se anuncien
Pruebe la navegación con el teclado entre los campos después de mostrar un error

Comprobación rápida

¿Qué hace formnovalidate en un botón?

Resumen: novalidate

Aspectos esenciales de novalidate:

novalidate en el formulario — desactiva toda la validación del navegador
formnovalidate en el botón — la desactiva solo para ese envío
Use la validación personalizada para controlar la experiencia de usuario y aplicar reglas complejas
Valide siempre en el servidor, ya que la validación del cliente se puede eludir
Anuncie los errores de forma accesible con role="alert" y aria-invalid

Preguntas frecuentes

¿La lección «El atributo novalidate» es gratis?

Sí — el texto completo de «El atributo novalidate» 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El atributo novalidate»?

Desactive la validación del navegador cuando la gestione usted mismo Practicas HTML 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 HTML Academy?

No se requiere experiencia previa. HTML 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 2 de 4.

¿Cuánto tiempo toma la lección «El atributo novalidate»?

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 HTML Academy?

Sí. Cada lección de HTML 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

← Volver a HTML Academy