Utilizando el atributo required en un select múltiple HTML

  • Publicado el 26 diciembre, 2016 - Actualizado el

El atributo required, utilizado en el campo de un formulario, indica que dicho campo es obligatorio para que el formulario sea enviado por el cliente. En el caso de los elementos select (<select>) el usuario tendrá que seleccionar una opción que tenga un valor asociado.

El uso del atributo required es realmente sencillo, solo hay que ponerlo en el elemento deseado, pero con los select simples, aquellos que permiten la selección única de una sola opción, 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 consiste en un elemento <select> con varios elementos <option> cada uno representando una opción a elegir:

<label for="select-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. 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 todas las opciones. Entonces, en un select como este, ¿qué sentido tiene el atributo required?

<label for="select-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 de forma obligatoria. 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. En este caso el primer <option> se convierte en el label o placeholder para el <select>:

<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>

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 mediante el atributo selected. 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