Valor incorrecto “tel-national” para el atributo “autocomplete” en el elemento “input”: El nombre del campo de autocompletado “tel-national” no está permitido en este contexto.

La especificación HTML define reglas específicas sobre qué nombres de campos de autocompletado autocomplete pueden emparejarse con qué tipos de entrada. El token tel-national (que representa un número de teléfono sin el código de país) está clasificado como que requiere un control de entrada basado en texto. Mientras tanto, <input type="tel"> es un control especializado que la especificación trata de manera diferente a un campo de texto plano. Cuando el validador encuentra tel-national en una entrada type="tel", marca el desajuste porque el nombre del campo de autocompletado no está permitido en ese contexto.

Esto puede parecer contraintuitivo: un valor de número de teléfono nacional en una entrada de teléfono se siente como un ajuste natural. Sin embargo, la distinción existe porque type="tel" ya implica un número de teléfono completo, y la especificación mapea el token de autocompletado más amplio tel a este. Los tokens telefónicos más granulares como tel-national, tel-country-code, tel-area-code, tel-local, tel-local-prefix y tel-local-suffix están diseñados para entradas type="text" donde un número de teléfono se está dividiendo en partes individuales a través de múltiples campos.

Hacer esto correctamente importa para el comportamiento de autocompletado del navegador. Cuando el valor de autocomplete y el tipo de entrada están emparejados correctamente según la especificación, los navegadores pueden rellenar más confiablemente el campo con la porción correcta del número de teléfono almacenado del usuario. Un emparejamiento inválido puede causar que el autocompletado falle silenciosamente o se comporte de manera impredecible en diferentes navegadores.

Cómo solucionarlo

Tienes dos opciones:

1. Cambia el tipo de entrada a text — Usa type="text" si específicamente quieres la porción nacional de un número de teléfono (sin el código de país). Esta es la elección correcta cuando estás dividiendo un número de teléfono a través de múltiples campos.
2. Cambia el valor de autocomplete a tel — Usa autocomplete="tel" si quieres un solo campo para el número de teléfono completo. Esto se empareja correctamente con type="tel".

Ejemplos

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

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

Esto desencadena el error de validación porque tel-national no está permitido en una entrada type="tel".

✅ Opción de solución 1: Cambiar el tipo de entrada a text

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

Usar type="text" satisface el requisito de la especificación para el token de autocompletado tel-national. Esto es ideal cuando solo recoges la porción nacional de un número.

✅ Opción de solución 2: Cambiar autocomplete a tel

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

Usar autocomplete="tel" es el emparejamiento correcto para type="tel" y le dice al navegador que autocomplete el número de teléfono completo.

✅ Dividir un número de teléfono a través de múltiples campos

Cuando necesitas campos separados para diferentes partes de un número de teléfono, usa type="text" con los tokens de autocompletado granulares:

<fieldset>
  <legend>Número de teléfono</legend>
  <label for="country-code">Código de 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>

Más información:

WHATWG Spec

HTML Spec: autocomplete attribute

→