Valor inválido “tel-national” para o atributo “autocomplete” no elemento “input”: O nome do campo de preenchimento automático “tel-national” não é permitido neste contexto.

A especificação HTML define regras específicas sobre quais nomes de campos de preenchimento automático autocomplete podem ser emparelhados com quais tipos de entrada. O token tel-national (que representa um número de telefone sem o código do país) está classificado como requerendo um controlo de entrada baseado em texto. Enquanto isso, <input type="tel"> é um controlo especializado que a especificação trata de forma diferente de um campo de texto simples. Quando o validador encontra tel-national numa entrada type="tel", sinaliza a incompatibilidade porque o nome do campo de preenchimento automático não é permitido nesse contexto.

Isto pode parecer contraintuitivo — um valor de número de telefone nacional numa entrada de telefone parece uma combinação natural. No entanto, a distinção existe porque type="tel" já implica um número de telefone completo, e a especificação mapeia o token de preenchimento automático tel mais amplo para ele. Os tokens de telefone mais granulares como tel-national, tel-country-code, tel-area-code, tel-local, tel-local-prefix e tel-local-suffix são projetados para entradas type="text" onde um número de telefone está sendo dividido em partes individuais através de múltiplos campos.

Acertar isto é importante para o comportamento de preenchimento automático do navegador. Quando o valor autocomplete e o tipo de entrada estão adequadamente emparelhados de acordo com a especificação, os navegadores podem preencher o campo de forma mais confiável com a porção correta do número de telefone armazenado do utilizador. Um emparelhamento inválido pode causar falha silenciosa do preenchimento automático ou comportamento imprevisível entre diferentes navegadores.

Como corrigir

Você tem duas opções:

1. Alterar o tipo de entrada para text — Use type="text" se você especificamente quer a porção nacional de um número de telefone (sem o código do país). Esta é a escolha certa quando você está dividindo um número de telefone através de múltiplos campos.
2. Alterar o valor do autocomplete para tel — Use autocomplete="tel" se você quer um único campo para o número de telefone completo. Isto emparelha corretamente com type="tel".

Exemplos

❌ Inválido: tel-national em type="tel"

<label for="phone">Número de telefone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel-national">

Isto desencadeia o erro de validação porque tel-national não é permitido numa entrada type="tel".

✅ Opção de correção 1: Alterar tipo de entrada para text

<label for="phone">Número de telefone (sem código do país)</label>
<input id="phone" name="phone" type="text" autocomplete="tel-national">

Usar type="text" satisfaz o requisito da especificação para o token de preenchimento automático tel-national. Isto é ideal quando se recolhe apenas a porção nacional de um número.

✅ Opção de correção 2: Alterar autocomplete para tel

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

Usar autocomplete="tel" é o emparelhamento correto para type="tel" e diz ao navegador para preencher automaticamente o número de telefone completo.

✅ Dividir um número de telefone através de múltiplos campos

Quando você precisa de campos separados para diferentes partes de um número de telefone, use type="text" com os tokens de preenchimento automático granulares:

<fieldset>
  <legend>Número de telefone</legend>
  <label for="country-code">Código do país</label>
  <input id="country-code" name="country-code" type="text" autocomplete="tel-country-code">
  <label for="national">Número nacional</label>
  <input id="national" name="national" type="text" autocomplete="tel-national">
</fieldset>

Saiba mais:

WHATWG Spec

HTML Spec: autocomplete attribute

→