Validación HTML: Valor incorrecto "X" para el atributo "novalidate" en el elemento "form".

Acerca de este problema HTML

Entendiendo los atributos booleanos en HTML

En HTML, los atributos booleanos funcionan de manera diferente a los atributos regulares. La presencia de un atributo booleano en un elemento representa true, y su ausencia representa false. Según la especificación HTML, un atributo booleano solo puede tener tres formas válidas:

Solo el nombre del atributo: novalidate
El atributo con un valor vacío: novalidate=""
El atributo con un valor que coincida con su propio nombre (sin distinción de mayúsculas/minúsculas): novalidate="novalidate"

Cualquier otro valor — como "true", "false", "1", "0", o "yes" — es inválido y desencadena este error de validación. Esta es una fuente común de confusión, especialmente para desarrolladores que vienen de frameworks como React (que usa noValidate={true}) o de lenguajes donde los atributos booleanos aceptan cadenas explícitas de true/false.

Por qué esto es importante

Cumplimiento de estándares: Usar valores inválidos viola la especificación HTML y causará fallos en la validación del W3C.
Comportamiento inesperado: Aunque la mayoría de navegadores son permisivos y tratan cualquier valor de novalidate como “presente” (lo que significa que incluso novalidate="false" deshabilitaría la validación, no la habilitaría), depender de este comportamiento no es confiable y puede confundir a otros desarrolladores que lean tu código.
Mantenibilidad: Escribir novalidate="false" sugiere que el formulario debería ser validado, pero lo contrario es verdad — el atributo está presente, por lo que se omite la validación. Esto crea código confuso y propenso a errores.

Acerca del atributo `novalidate`

El atributo novalidate le dice al navegador que omita su validación de restricciones integrada cuando se envía el formulario. Sin él, el navegador verifica campos requeridos, patrones de entrada, formatos de email y otras restricciones antes de permitir el envío.

Si novalidate no está establecido en el formulario, los botones de envío individuales aún pueden omitir la validación por botón usando el atributo formnovalidate en un elemento <button>, <input type="submit">, o <input type="image">.

Ejemplos

❌ Inválido: valor arbitrario en `novalidate`

<form method="post" novalidate="true">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
</form>

Esto desencadena el error porque "true" no es un valor válido para un atributo booleano. Otras variaciones inválidas incluyen:

<form method="post" novalidate="1">
<form method="post" novalidate="yes">
<form method="post" novalidate="false">

Nota que novalidate="false" es especialmente peligroso — no habilita la validación. Porque el atributo está presente, el navegador deshabilita la validación independientemente del valor.

✅ Válido: solo el nombre del atributo (recomendado)

<form method="post" novalidate>
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
</form>

✅ Válido: valor de cadena vacía

<form method="post" novalidate="">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
</form>

✅ Válido: valor que coincide con el nombre del atributo

<form method="post" novalidate="novalidate">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
</form>

✅ Válido: eliminar el atributo para habilitar la validación

Si quieres que el formulario sea validado, simplemente elimina el atributo novalidate por completo:

<form method="post">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
</form>

✅ Usando `formnovalidate` en un botón específico

Si quieres validación en el envío principal pero quieres omitirla para un botón “Guardar borrador”, usa formnovalidate en el botón en su lugar:

<form method="post">
  <label>Email:
    <input type="email" name="email" required>
  </label>
  <button>Submit</button>
  <button formnovalidate>Save Draft</button>
</form>

Este patrón mantiene la validación activa para el envío principal mientras permite que los borradores la omitan — sin necesidad de novalidate en el formulario en absoluto.