Valor incorrecto “” para el atributo “maxlength” en elemento “textarea”: La cadena vacía no es un entero no negativo válido.

El atributo maxlength controla el número máximo de caracteres que un usuario puede escribir en un <textarea>. Según la especificación HTML, su valor debe ser un entero no negativo válido — es decir, una cadena de uno o más dígitos ASCII como 0, 100, o 5000. Una cadena vacía (""), espacios en blanco, números negativos o valores no numéricos son todos inválidos. Cuando el navegador encuentra un valor maxlength inválido, su comportamiento se vuelve impredecible — algunos navegadores pueden ignorar el atributo, mientras que otros pueden silenciosamente no aplicar límite alguno, llevando a comportamientos inconsistentes del formulario entre plataformas.

Este problema surge frecuentemente cuando una plantilla del lado del servidor o un framework de JavaScript produce condicionalmente el atributo maxlength pero genera un valor vacío cuando no hay límite configurado. Por ejemplo, una plantilla como maxlength="{{ maxChars }}" renderizará maxlength="" si la variable maxChars está vacía o no definida. La solución es asegurar que el atributo se omita completamente cuando no hay valor disponible, en lugar de renderizarlo con una cadena vacía.

Omitir maxlength permite entrada ilimitada. Establecerlo en 0 es técnicamente válido pero impide que el usuario introduzca caracteres, lo cual es raramente útil. Elige un valor que tenga sentido para tu caso de uso, como el límite de caracteres de la columna correspondiente en la base de datos.

Por qué es importante

• Cumplimiento de estándares: La especificación HTML explícitamente requiere un entero no negativo válido. Una cadena vacía viola esta regla y produce un error de validación.
• Comportamiento consistente: Los navegadores manejan valores de atributos inválidos de forma diferente. Un valor válido asegura que el límite de caracteres funcione de manera confiable en todos los navegadores.
• Accesibilidad: Los lectores de pantalla y tecnologías asistivas pueden anunciar el límite máximo de caracteres a los usuarios. Un valor vacío o inválido podría causar anuncios confusos o ser silenciosamente ignorado.
• Confiabilidad del formulario: Si tu aplicación depende de maxlength para restricciones de entrada del lado del cliente (ej., para coincidir con un límite de columna de base de datos), un valor inválido significa que la restricción no se aplica, potencialmente llevando a truncamiento de datos o errores del servidor.

Cómo solucionarlo

1. Establece un valor entero específico si necesitas un límite de caracteres: maxlength="200".
2. Elimina el atributo completamente si no necesitas límite. Un maxlength ausente significa entrada ilimitada.
3. Arregla tus plantillas — si estás usando un lenguaje del lado del servidor o framework de JavaScript, renderiza condicionalmente el atributo para que se omita cuando no se proporciona valor en lugar de generarlo como vacío.

Ejemplos

❌ Inválido: valor maxlength vacío

La cadena vacía no es un entero no negativo válido, por lo que esto desencadena el error de validación.

<label for="msg">Mensaje</label>
<textarea id="msg" name="message" maxlength=""></textarea>

❌ Inválido: valor maxlength no numérico

Cadenas, decimales y números negativos también son inválidos.

<label for="bio">Biografía</label>
<textarea id="bio" name="bio" maxlength="none"></textarea>

<label for="notes">Notas</label>
<textarea id="notes" name="notes" maxlength="-1"></textarea>

✅ Solucionado: valor entero específico

Establece maxlength al límite de caracteres deseado.

<label for="msg">Mensaje (máximo 200 caracteres)</label>
<textarea id="msg" name="message" maxlength="200"></textarea>

✅ Solucionado: atributo omitido completamente

Si no se necesita límite de caracteres, simplemente elimina el atributo.

<label for="msg">Mensaje</label>
<textarea id="msg" name="message"></textarea>

✅ Solucionado: renderizado condicional en una plantilla

Si estás usando un motor de plantillas, incluye condicionalmente el atributo solo cuando existe un valor. La sintaxis exacta depende de tu framework — aquí tienes un ejemplo conceptual:

<!-- En lugar de siempre generar el atributo: -->

<!-- <textarea maxlength="{{ maxChars }}"></textarea> -->


<!-- Solo renderízalo cuando maxChars tenga un valor: -->

<!-- {% if maxChars %}<textarea maxlength="{{ maxChars }}"></textarea>{% endif %} -->


<label for="feedback">Comentarios</label>
<textarea id="feedback" name="feedback" maxlength="500"></textarea>

Más información:

MDN Reference

<textarea>: The Textarea element - MDN

→

MDN Reference

maxlength - HTML attribute: MDN

→