El atributo “required” solo se permite cuando el tipo de input es “checkbox”, “date”, “datetime-local”, “email”, “file”, “month”, “number”, “password”, “radio”, “search”, “tel”, “text”, “time”, “url”, o “week”.

El atributo required es un atributo booleano que le dice al navegador que un campo debe completarse antes de que el formulario pueda enviarse. Sin embargo, no todos los tipos de input soportan este concepto. Algunos tipos de input siempre tienen un valor (como range, que por defecto está en el punto medio, o color, que por defecto es #000000), mientras que otros representan acciones en lugar de datos del usuario (como submit, reset, image, y button). Para inputs hidden, el usuario no tiene forma de interactuar con el campo en absoluto, por lo que requerir que proporcione un valor no tiene sentido.

La especificación HTML limita explícitamente required a los siguientes tipos de input: checkbox, date, datetime-local, email, file, month, number, password, radio, search, tel, text, time, url, y week.

Usar required en un tipo no soportado es HTML inválido. Los navegadores típicamente ignorarán el atributo en esta situación, lo que significa que podrías creer que un campo es requerido cuando en realidad no se está validando en absoluto. Esto puede llevar a que se envíen formularios con datos faltantes o inesperados. También crea confusión para las tecnologías asistivas — los lectores de pantalla pueden anunciar un campo como requerido aunque el navegador no lo vaya a hacer cumplir, confundiendo a los usuarios.

Cómo solucionarlo

1. Verifica el tipo de input. Si estás usando required en un input con un tipo como hidden, range, color, submit, reset, image, o button, el atributo no está permitido.
2. Elimina el atributo required si el tipo de input inherentemente proporciona un valor o no acepta datos proporcionados por el usuario.
3. Cambia el tipo de input si realmente necesitas que el campo sea requerido y el tipo actual no coincide con tu intención.
4. Usa validación del lado del servidor para inputs como hidden que no pueden usar required pero aún necesitan un valor.

Ejemplos

❌ Inválido: required en un input hidden

<form>
  <input type="hidden" name="token" required>
  <button type="submit">Submit</button>
</form>

El usuario no puede interactuar con un input hidden, por lo que required no está permitido aquí. El navegador no lo hará cumplir.

❌ Inválido: required en un input range

<form>
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100" required>
  <button type="submit">Submit</button>
</form>

Un input range siempre tiene un valor (por defecto está en el punto medio), por lo que required no tiene sentido y no está permitido.

❌ Inválido: required en un input color

<form>
  <label for="color">Pick a color:</label>
  <input type="color" id="color" name="color" required>
  <button type="submit">Submit</button>
</form>

Un input color siempre tiene un valor (por defecto #000000), por lo que required no es válido aquí.

✅ Válido: required eliminado de tipos no soportados

<form>
  <input type="hidden" name="token" value="abc123">
  <label for="volume">Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">
  <button type="submit">Submit</button>
</form>

✅ Válido: required en tipos de input soportados

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="dob">Date of birth:</label>
  <input type="date" id="dob" name="dob" required>

  <label>
    <input type="checkbox" name="terms" required>
    I agree to the terms
  </label>

  <button type="submit">Submit</button>
</form>

Estos tipos de input — email, date, y checkbox — todos aceptan entrada directa del usuario y están en la lista permitida para el atributo required.

Más información:

MDN Reference

MDN: required attribute

→