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

¿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? : /

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.

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

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

¿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).

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>

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.

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

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

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>

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

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>

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.

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á

Prueba esto

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

También puedes hacerlo dinámicamente con JQuery

Conjunto requerido

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

Eliminar requerido

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