Posso applicare l'attributo richiesto ai campi <select> in HTML5?

Come posso verificare se un utente ha selezionato qualcosa da un <select>campo in HTML5?

Vedo <select>che non supporta il nuovo requiredattributo ... allora devo usare JavaScript? O c'è qualcosa che mi manca? : /

Obbligatorio : avere il primo valore vuoto - le opere necessarie su valori vuoti

Prerequisiti : correggere html5 DOCTYPE e un campo di input denominato

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

Come da documentazione (l'elenco e il grassetto sono miei)

L'attributo richiesto è un attributo booleano.
Se specificato, all'utente verrà richiesto di selezionare un valore prima di inviare il modulo.

Se un elemento selezionato

• ha un attributo obbligatorio specificato,
• non è stato specificato un attributo multiplo,
• e ha una dimensione di visualizzazione di 1 (non avere SIZE = 2 o più - omettilo se non necessario);
• e se il valore del primo elemento opzione nell'elenco di opzioni dell'elemento select (se presente) è la stringa vuota (cioè presente come value=""),
• e il nodo padre di quell'elemento opzione è l'elemento select (e non un elemento optgroup),

quindi quell'opzione è l'opzione etichetta segnaposto dell'elemento select.

L' <select>elemento supporta l' requiredattributo, come da specifica:

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

Quale browser non lo rispetta?

(Ovviamente, devi convalidare sul server comunque, poiché non puoi garantire che gli utenti abbiano JavaScript abilitato.)

È possibile utilizzare l' selectedattributo per l'elemento opzione per selezionare una scelta per impostazione predefinita. È possibile utilizzare l' requiredattributo per l'elemento select per assicurarsi che l'utente selezioni qualcosa.

In Javascript, puoi controllare la selectedIndexproprietà per ottenere l'indice dell'opzione selezionata oppure puoi controllare la valueproprietà per ottenere il valore dell'opzione selezionata.

Secondo la specifica HTML5, selectedIndex"restituisce l'indice del primo elemento selezionato, se presente, oppure −1 se non è presente alcun elemento selezionato. E value" restituisce il valore del primo elemento selezionato, se presente, o la stringa vuota se presente nessun elemento selezionato. "Quindi, se selezionatoIndex = -1, allora sai che non hanno selezionato nulla.

<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ì, funziona:

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

devi mantenere vuota la prima opzione.

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

per prima cosa devi assegnare un valore vuoto nella prima opzione. vale a dire Seleziona qui. Solo quello richiesto funzionerà.

Rende vuoto il valore del primo elemento della casella di selezione.

Quindi ogni volta che pubblichi il FORM ottieni un valore vuoto e, in questo modo, sapresti che l'utente non ha selezionato nulla dal menu a discesa.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Devi impostare l' valueattributo di optionsulla stringa vuota:

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

selectrestituirà il valueselezionato optional server quando l'utente preme submitsul form. Un vuoto valueequivale a un textinput vuoto -> solleva il requiredmessaggio.

W3Schools

L'attributo value specifica il valore da inviare a un server quando viene inviato un modulo.

Esempio

prova questo, funzionerà, ho provato questo e questo funziona.

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

Funziona perfettamente se il valore della prima opzione è null. Spiegazione: HTML5 leggerà un valore nullo all'invio del pulsante. Se non è nullo (attributo valore), si presume che il valore selezionato non sia nullo, quindi la validazione avrebbe funzionato, cioè controllando se ci fossero dati nel tag opzione. Pertanto non produrrà il metodo di convalida. Tuttavia, suppongo che l'altro lato diventi chiaro, se l'attributo value è impostato su null ie (value = ""), HTML5 rileverà un valore vuoto sulla prima o piuttosto l'opzione selezionata di default dando così il messaggio di validazione. Grazie per avermelo chiesto. Felice di aiutare. Sono contento di sapere se l'ho fatto.

In html5 puoi fare usando l'espressione completa:

<select required="required">

Non so perché la breve espressione non funzioni, ma prova questa. Risolverà.

Prova questo

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

Puoi farlo anche in modo dinamico con JQuery

Impostare richiesto

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

Rimuovi richiesto

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