¿Puedo aplicar el atributo requerido a los campos <seleccionar> en HTML5?

256

¿Cómo puedo verificar si un usuario ha seleccionado algo de un <select>campo en HTML5?

Veo <select>que no admite el nuevo requiredatributo ... ¿tengo que usar JavaScript entonces? ¿O hay algo que me falta? : /

Mate
fuente
1
Si está interesado en cualquier nivel de compatibilidad entre navegadores, probablemente tendrá que usar JavaScript. El atributo que quieres es selectedIndex.
Luke Sneeringer
44
Según el borrador actual del editor de la especificación HTML5 (6 de agosto de 2011), el elemento de selección tiene un atributo requerido. "El atributo requerido es un atributo booleano. Cuando se especifica, el usuario deberá seleccionar un valor antes de enviar el formulario". dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Respuestas:

471

Obligatorio : tener el primer valor vacío: el trabajo obligatorio funciona con valores vacíos

Prerrequisitos : html5 DOCTYPE correcto y un campo de entrada con nombre

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

Según la documentación (el listado y negrita es mío)

El atributo requerido es un atributo booleano.
Cuando se especifique, el usuario deberá seleccionar un valor antes de enviar el formulario.

Si un elemento seleccionado

  • tiene un atributo requerido especificado,
  • no tiene un atributo múltiple especificado,
  • y tiene un tamaño de visualización de 1 (no tiene TAMAÑO = 2 o más; omítalo si no es necesario);
  • y si el valor del primer elemento de opción en la lista de opciones del elemento seleccionado (si existe) es la cadena vacía (es decir, presente como value=""),
  • y el nodo primario de ese elemento de opción es el elemento de selección (y no un elemento de grupo opt),

entonces esa opción es la opción de etiqueta de marcador de posición del elemento seleccionado.

mplungjan
fuente
27
Además, para que el usuario no pueda seleccionar la no opción una vez que se ha seleccionado: <option selected = "selected" disabled = "disabled" value = ""> Seleccione </option>
CoolAJ86
2
Eso no tiene sentido ... Además, no funcionará en varios navegadores
mplungjan
44
@ CoolAJ86 funciona bien en Chrome 23, Firefox 16 e IE 10.
KTB
15
Veo 2 votos a favor. Si tiene ganas de votar en contra, por favor comente POR QUÉ
mplungjan
1
Parafrasear la documentación es muy útil; gracias
skia.heliou
13

El <select>elemento admite el requiredatributo, según la especificación:

¿Qué navegador no respeta esto?

(Por supuesto, debe validar en el servidor de todos modos, ya que no puede garantizar que los usuarios tengan habilitado JavaScript).

Paul D. Waite
fuente
8
Estoy seguro de que solo necesitaba un valor = "" en la primera entrada; si no hay un atributo de valor o un valor en todas las opciones, el requisito no se activará porque la selección devuelve un valor real
mplungjan
1
@mplungjan: ah , gotcha - bien visto.
Paul D. Waite
1
@ PaulD.Waite ¿Todavía no podemos garantizar que los usuarios tengan habilitado Javascript? Solo llevo 2 años en desarrollo web y nunca me he encontrado con ese problema.
user137717
2
@ user137717: es la web. No puedes garantizar nada. Por supuesto, puede decidir que no vale la pena atenderlo.
Paul D. Waite
5

Puede usar el selectedatributo para el elemento de opción para seleccionar una opción de forma predeterminada. Puede usar el requiredatributo para el elemento select para asegurarse de que el usuario seleccione algo.

En Javascript, puede verificar la selectedIndexpropiedad para obtener el índice de la opción seleccionada, o puede verificar la valuepropiedad para obtener el valor de la opción seleccionada.

De acuerdo con la especificación HTML5, selectedIndex"devuelve el índice del primer elemento seleccionado, si lo hay, o -1 si no hay un elemento seleccionado. Y value" devuelve el valor del primer elemento seleccionado, si lo hay, o la cadena vacía si hay sin elemento seleccionado ". Entonces, si se seleccionaIndex = -1, entonces sabes que no han seleccionado nada.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>
james.garriss
fuente
1
@Apostle: deja de intentar cambiar esta respuesta a través de ediciones. Si cree que es incorrecto, no dude en dejar su propia respuesta.
Brad Larson
@BradLarson Al principio no entendí bien: el código no es una solución completa al problema en esta pregunta o es un ejemplo explicativo del último párrafo de esta respuesta. Probablemente el segundo en este caso. Creo que es mejor organizar este código como un fragmento y mostrar el resultado -1. Lo siento, no aclare en los comentarios primero.
Apóstol
5

Sí, está funcionando:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

tienes que mantener la primera opción en blanco.

pradipgarala
fuente
1
<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>
Yatou
fuente
3
Esta respuesta simplemente repite un ejemplo anterior sin explicación adicional.
james.garriss
1

primero debe asignar un valor en blanco en la primera opción. es decir, seleccione aquí. Solo se requerirá que funcione.

ayush
fuente
0

Ponga el valor del primer elemento del cuadro de selección en blanco.

Entonces, cuando publicas el FORMULARIO, obtienes un valor en blanco y, de esta manera, sabrás que el usuario no ha seleccionado nada del menú desplegable.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
santosh devnath
fuente
0

Debe establecer el valueatributo de optionen la cadena vacía:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

selectdevolverá lo valueseleccionado optional servidor cuando el usuario presione submitel botón form. Un vacío valuees lo mismo que una textentrada vacía -> elevar el requiredmensaje.


w3schools

El atributo value especifica el valor que se enviará a un servidor cuando se envía un formulario.

Ejemplo

JBallin
fuente
0

prueba esto, esto va a funcionar, he intentado esto y esto funciona.

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>
sayyed tabrez
fuente
0

Funciona perfectamente bien si el valor de la primera opción es nulo. Explicación: El HTML5 leerá un valor nulo al enviar el botón. Si no es nulo (atributo de valor), se supone que el valor seleccionado no es nulo, por lo tanto, la validación habría funcionado, es decir, verificando si ha habido datos en la etiqueta de opción. Por lo tanto, no producirá el método de validación. Sin embargo, supongo que el otro lado queda claro, si el atributo de valor se establece en nulo, es decir (valor = ""), HTML5 detectará un valor vacío en la primera opción o más bien en la opción seleccionada por defecto, dando así el mensaje de validación. Gracias por preguntar. Feliz de ayudar. Me alegra saber si lo hice.

Kudzai Machiridza
fuente
-1

En html5 puedes hacerlo usando la expresión completa:

<select required="required">

No sé por qué la expresión corta no funciona, pero prueba esta. Se resolverá

Roger Rocco
fuente
-4

Prueba esto

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
usuario2289459
fuente
-6

También puedes hacerlo dinámicamente con JQuery

Conjunto requerido

$("#select1").attr('required', 'required');

Eliminar requerido

$("#select1").removeAttr('required');
mlqmarkos12
fuente