O atributo “minlength” só é permitido quando o tipo de input é “email”, “password”, “search”, “tel”, “text” ou “url”.

O atributo minlength define o número mínimo de caracteres (como unidades de código UTF-16) que um utilizador pode inserir num campo de input baseado em texto. Fornece validação client-side integrada sem necessitar de JavaScript. No entanto, só faz sentido em tipos de input onde o utilizador está a digitar texto de forma livre. Para tipos de input como number, date, color, range ou checkbox, o conceito de um comprimento mínimo de caracteres não se aplica — estes inputs têm os seus próprios formatos de valor restritos ou usam outros atributos como min e max para validação.

Quando o validador W3C encontra minlength num tipo de input não suportado, marca o atributo como inválido. Os navegadores normalmente ignoram o atributo silenciosamente, o que significa que a sua validação pretendida não irá funcionar. Isto pode levar a uma falsa sensação de segurança onde você acredita que o input está a ser validado quando não está.

O valor minlength deve ser um número inteiro não negativo (0 ou superior) e deve ser menor ou igual a maxlength se ambos forem especificados. O atributo minlength também funciona em elementos <textarea>.

Exemplos

❌ Incorreto: minlength num input de número

O tipo de input number não suporta minlength. Se quer impor um valor mínimo, use o atributo min em vez disso.

<label for="age">Introduza a sua idade</label>
<input type="number" minlength="1" id="age">

✅ Corrigido: usar min para inputs de número

<label for="age">Introduza a sua idade</label>
<input type="number" min="1" id="age">

❌ Incorreto: minlength num input de data

<label for="start-date">Data de início</label>
<input type="date" minlength="10" id="start-date">

✅ Corrigido: remover minlength de inputs de data

Os inputs de data têm um formato controlado pelo navegador, por isso as restrições de comprimento de caracteres não se aplicam. Use min e max para restringir o intervalo de datas.

<label for="start-date">Data de início</label>
<input type="date" min="2024-01-01" id="start-date">

✅ Correto: minlength em tipos de input suportados

Aqui estão usos válidos de minlength em todos os tipos de input suportados:

<label for="username">Nome de utilizador (pelo menos 3 caracteres)</label>
<input type="text" minlength="3" id="username">

<label for="email">Email</label>
<input type="email" minlength="5" id="email">

<label for="pass">Palavra-passe (pelo menos 8 caracteres)</label>
<input type="password" minlength="8" id="pass">

<label for="phone">Número de telefone</label>
<input type="tel" minlength="7" id="phone">

<label for="query">Pesquisar</label>
<input type="search" minlength="2" id="query">

<label for="website">URL do website</label>
<input type="url" minlength="10" id="website">

✅ Correto: minlength com maxlength numa textarea

<label for="bio">Biografia (entre 10 e 200 caracteres)</label>
<textarea minlength="10" maxlength="200" id="bio"></textarea>

Referência rápida

Saiba mais:

MDN Reference

MDN: minlength attribute

→