validacion - validar formulario html javascript
¿Puedo aplicar el atributo requerido a los campos<seleccionar> en HTML5? (12)
¿Cómo puedo verificar si un usuario ha seleccionado algo de un campo <select>
en HTML5?
Veo que <select>
no admite el nuevo atributo required
... ¿tengo que usar JavaScript entonces? ¿O hay algo que me falta? : /
Debe establecer el atributo de value
de option
en 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>
select
devolverá el value
de la option
seleccionada al servidor cuando el usuario presione submit
en el form
. Un value
vacío es lo mismo que un ingreso de text
vacío -> elevar el mensaje required
.
El atributo de valor especifica el valor que se enviará a un servidor cuando se envía un formulario.
El elemento <select>
admite el atributo required
, según la especificación:
¿Qué navegador no respeta esto?
(Por supuesto, tiene que validar en el servidor de todos modos, ya que no puede garantizar que los usuarios tengan habilitado JavaScript).
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á.
Haga 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>
Intenta 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>
Primero tienes que asignar un valor en blanco en la primera opción. Por ejemplo, seleccione aquí. Lo que solo se requiere funcionará.
Prueba esto
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
Puede utilizar el atributo selected
para el elemento de opción para seleccionar una opción de forma predeterminada. Puede usar el atributo required
para el elemento de selección para asegurarse de que el usuario selecciona algo.
En Javascript, puede verificar la propiedad selectedIndex
para obtener el índice de la opción seleccionada, o puede verificar la propiedad value
para obtener el valor de la opción seleccionada.
De acuerdo con la especificación de HTML5, selectedIndex
"devuelve el índice del primer elemento seleccionado, si existe, o −1 si no hay ningún elemento seleccionado. Y el value
" devuelve el valor del primer elemento seleccionado, si existe, o la cadena vacía si no hay ningún elemento seleccionado. "Entonces, si selectedIndex = -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>
Puedes hacerlo también dinámicamente con JQuery.
Conjunto requerido
$("#select1").attr(''required'', ''required'');
Eliminar requerido
$("#select1").removeAttr(''required'');
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.
Obligatorio : tener el primer valor vacío - trabajos requeridos en valores vacíos
Requisitos previos : corregir el DOCTYPE de html5 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 de selección
- tiene un atributo requerido especificado,
- no tiene un atributo múltiple especificado,
- y tiene un tamaño de pantalla 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 optgroup),
entonces esa opción es la opción de la etiqueta del marcador de posición del elemento seleccionado.
<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>