El atributo required, utilizado en el campo de un formulario, indica que dicho campo es obligatorio para el envío del formulario. Dicho de otro modo, el usuario ha de proporcionar un valor. En el caso de los elementos select (<select>) el usuario tendrá que seleccionar una opción que tenga un valor asociado.

Generalmente basta con establecer el atributo required, pero en el caso de los select simples, los de selección única, hay que tener en cuenta algunas peculiaridades que iremos viendo a lo largo de este post.

Atributo required en select simples

El select más simple y básico consiste en un elemento <select> con varios elementos <option> cada uno representando una opción a elegir:

<label for="selec-comunidad">Selecciona tu comunidad</label>
<select name="comunidad" id="select-comunidad">
    <option value="1">Galicia</option>
    <option value="2">Asturias</option>
    <option value="3">Cantabria</option>
    <option value="4">País Vasco</option>
    <option value="5">Navarra</option>
</select>

En un select simple como el anterior, la primera opción es seleccionada de forma predeterminada al cargar el formulario (salvo que se le aplique el atributo selected a otra de las opciones). Y además, en un select simple no se puede deseleccionar una opción, la única forma de deseleccionar es seleccionar otra de las opciones; dicho de otro modo, en un select simple siempre hay una opción seleccionada.

Para que quede claro el contexto: al cargar un formulario con un select simple, tendremos una opción seleccionada de forma predeterminada y el usuario no podrá deseleccionar todo. Entonces, en un select como este, ¿qué sentido tiene el atributo required?

<label for="selec-comunidad">Selecciona tu comunidad</label>
<select name="comunidad" id="select-comunidad" required>
    <option value="1">Galicia</option>
    <option value="2">Asturias</option>
    <option value="3">Cantabria</option>
    <option value="4">País Vasco</option>
    <option value="5">Navarra</option>
</select>

Efectivamente, no tiene mucho sentido. De hecho, si quieres validar el HTML, no lo hará.

Para utilizar el atributo required en un select simple, una de las opciones del select tiene que tener un valor vacío o no tener valor asociado. Esta es la única forma de que el usuario tenga que realizar la acción de proporcionar un valor. Y para que no haya un valor seleccionado de forma predeterminada, esta opción sin valor tiene que ser la primera del select:

<label for="selec-comunidad">Selecciona tu comunidad</label>
<select name="comunidad" id="select-comunidad" required>
    <option></option>
    <option value="1">Galicia</option>
    <option value="2">Asturias</option>
    <option value="3">Cantabria</option>
    <option value="4">País Vasco</option>
    <option value="5">Navarra</option>
</select>

En el ejemplo anterior hemos utilizado un elemento <option> sin valor asociado y sin texto, pero también es válido con texto y con un valor igual a un string vacío:

<select name="comunidad" required>
    <option value="">Seleccione una opción</option>
    <option value="1">Galicia</option>
    <option value="2">Asturias</option>
    <option value="3">Cantabria</option>
    <option value="4">País Vasco</option>
    <option value="5">Navarra</option>
</select>

En este caso, el primer <option> se convierte en el label o placeholder para el <select>.

Resumiendo, para utilizar el atributo required en un <select> de selección única:

  • Debe haber al menos un <option> anidado
  • El primer <option> no debe tener valor declarado o este debe ser un string vacío
  • El primer <option> puede tener contenido o no

select de selección múltiple

En los select de selección múltiple no hay una opción seleccionada de forma predeterminada, a no que ser que el desarrollador lo indique. En cualquier caso, sean opciones seleccionadas por el usuario o sean opciones preseleccionadas por la aplicación, el usuario puede desmarcar todas opciones si quiere.

En este caso, el uso del atributo required es tan fácil como establecerlo:

<select name="comunidad" multiple required>
    <option value="1">Galicia</option>
    <option value="2">Asturias</option>
    <option value="3">Cantabria</option>
    <option value="4">País Vasco</option>
    <option value="5">Navarra</option>
</select>

Referencias