Verificação HTML: Valor inválido "" para o atributo "maxlength" no elemento "textarea": A string vazia não é um número inteiro não negativo válido.

Sobre este problema HTML

O atributo maxlength controla o número máximo de caracteres que um utilizador pode digitar num <textarea>. De acordo com a especificação HTML, o seu valor deve ser um número inteiro não negativo válido — ou seja, uma string de um ou mais dígitos ASCII como 0, 100, ou 5000. Uma string vazia (""), espaços em branco, números negativos, ou valores não numéricos são todos inválidos. Quando o navegador encontra um valor maxlength inválido, o seu comportamento torna-se imprevisível — alguns navegadores podem ignorar o atributo, enquanto outros podem silenciosamente não impor qualquer limite, levando a um comportamento inconsistente do formulário entre plataformas.

Este problema surge frequentemente quando um template do lado do servidor ou framework JavaScript produz condicionalmente o atributo maxlength mas gera um valor vazio quando não está configurado qualquer limite. Por exemplo, um template como maxlength="{{ maxChars }}" irá renderizar maxlength="" se a variável maxChars estiver vazia ou indefinida. A correção é garantir que o atributo seja completamente omitido quando não há valor disponível, em vez de renderizá-lo com uma string vazia.

Omitir maxlength permite entrada ilimitada. Defini-lo para 0 é tecnicamente válido mas impede o utilizador de introduzir qualquer caracter, o que raramente é útil. Escolha um valor que faça sentido para o seu caso de uso, tal como o limite de caracteres da coluna correspondente na base de dados.

Porque isto importa

Conformidade com padrões: A especificação HTML requer explicitamente um número inteiro não negativo válido. Uma string vazia viola esta regra e produz um erro de validação.
Comportamento consistente: Os navegadores lidam com valores de atributo inválidos de forma diferente. Um valor válido garante que o limite de caracteres funciona de forma fiável em todos os navegadores.
Acessibilidade: Leitores de ecrã e tecnologias assistivas podem anunciar o limite máximo de caracteres aos utilizadores. Um valor vazio ou inválido pode causar anúncios confusos ou ser silenciosamente ignorado.
Fiabilidade do formulário: Se a sua aplicação depende de maxlength para restrições de entrada do lado do cliente (por exemplo, para corresponder a um limite de coluna da base de dados), um valor inválido significa que a restrição não é aplicada, potencialmente levando a truncamento de dados ou erros do servidor.

Como corrigir

Defina um valor inteiro específico se precisar de um limite de caracteres: maxlength="200".
Remova o atributo inteiramente se não for necessário qualquer limite. Um maxlength ausente significa entrada ilimitada.
Corrija os seus templates — se estiver a usar uma linguagem do lado do servidor ou framework JavaScript, renderize condicionalmente o atributo para que seja omitido quando não há valor fornecido, em vez de ser produzido como vazio.

Exemplos

❌ Inválido: valor `maxlength` vazio

A string vazia não é um número inteiro não negativo válido, portanto isto desencadeia o erro de validação.

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

❌ Inválido: valor `maxlength` não numérico

Strings, decimais, e números negativos são também inválidos.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" maxlength="none"></textarea>

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

✅ Corrigido: valor inteiro específico

Defina maxlength para o limite de caracteres desejado.

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

✅ Corrigido: atributo completamente omitido

Se não for necessário qualquer limite de caracteres, simplesmente remova o atributo.

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

✅ Corrigido: renderização condicional num template

Se estiver a usar um motor de templates, inclua condicionalmente o atributo apenas quando um valor existe. A sintaxe exata depende do seu framework — aqui está um exemplo conceptual:

<!-- Em vez de sempre produzir o atributo: -->

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


<!-- Renderize-o apenas quando maxChars tem um valor: -->

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


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