Acerca de este problema HTML
La especificación HTML define maxlength como que acepta únicamente un entero no negativo válido — una cadena de uno o más dígitos ASCII que representa un número mayor o igual a cero. Una cadena vacía no cumple este requisito, por lo que el validador del W3C lo marca como un error. Esto ocurre comúnmente cuando un valor es generado dinámicamente por un CMS, motor de plantillas o framework de JavaScript y el valor termina en blanco, o cuando un desarrollador añade el atributo como marcador de posición con la intención de rellenarlo más tarde.
Por qué es importante
Aunque la mayoría de navegadores ignoran silenciosamente un maxlength vacío y no imponen límite de caracteres, depender de este comportamiento es problemático por varias razones:
- Cumplimiento de estándares: HTML inválido puede llevar a comportamientos impredecibles entre diferentes navegadores y versiones. Lo que funciona hoy puede no funcionar mañana.
-
Accesibilidad: Las tecnologías de asistencia pueden leer o interpretar el atributo
maxlengthpara comunicar restricciones de entrada a los usuarios. Un valor vacío podría causar anuncios confusos o incorrectos. -
Mantenibilidad: Un
maxlengthvacío es ambiguo — no está claro si el desarrollador quería no tener límite, se olvidó de establecer un valor, o un error causó que el valor faltara.
Cómo solucionarlo
Tienes dos opciones:
-
Establecer un entero no negativo válido: Proporciona un número concreto que represente el número máximo de caracteres que el usuario puede introducir, como
maxlength="100". -
Eliminar el atributo: Si no necesitas aplicar un límite de caracteres, simplemente omite
maxlengthpor completo. No hay necesidad de incluirlo con un valor vacío.
Los valores válidos para maxlength incluyen "0", "1", "255", o cualquier otro número entero no negativo. Los siguientes no son válidos: cadenas vacías (""), números negativos ("-1"), números decimales ("10.5"), o cadenas no numéricas ("none").
Dónde se aplica maxlength
El atributo maxlength tiene significado en tipos de input de entrada de texto: text, search, url, tel, email, password, y también en el elemento textarea. Para tipos de entrada que no son de texto como number, date, range, o checkbox, el atributo no tiene efecto y no debería usarse.
Ejemplos
❌ Incorrecto: cadena vacía desencadena el error de validación
<input type="text" name="username" maxlength="">
❌ Incorrecto: otros valores inválidos
<input type="text" name="username" maxlength="-1">
<input type="email" name="email" maxlength="none">
<input type="text" name="bio" maxlength="10.5">
✅ Correcto: longitud máxima explícita
<input type="text" name="username" maxlength="30">
✅ Correcto: omitir el atributo cuando no se necesita límite
<input type="text" name="comment">
✅ Correcto: maxlength en un textarea
<textarea name="bio" maxlength="500"></textarea>
✅ Correcto: valor dinámico con respaldo
Si tu valor de maxlength proviene de una plantilla o CMS, asegúrate de que produces un número válido o omites el atributo por completo. Por ejemplo, en un lenguaje de plantillas, usa lógica condicional:
<!-- Solo renderizar maxlength si el valor está establecido -->
<input type="text" name="username" maxlength="100">
En lugar de renderizar un atributo vacío como maxlength="", asegúrate de que tu plantilla omita el atributo cuando no hay ningún valor configurado.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.