Bootstrap select required

[mdnet]

Ciao a tutti, sono nuovissimo di bootstrap e non solo .... ma ho sete di imparare.

Sto creando un form, vorrei impostare come obbligatorio un campo select ma non ne vengo fuori. Dove sbaglio ? Grazie

<div class="col-md-6">
   <select class="form-control" name="Select_Regione" required>
      <option disabled="" selected="">Regione</option>
      <option>Abruzzo</option>
      <option>Basilicata</option>
      <option>Calabria</option>
      <option>Emilia-Romagna</option>
      <option>Friuli-Venezia Giulia</option>
      <option>Lazio</option>
      <option>Liguria</option>
      <option>Lombardia</option>
      <option>Marche</option>
      <option>Molise</option>
      <option>Piemonte</option>
      <option>Puglia</option>
      <option>Sardegna</option>
      <option>Sicilia</option>
      <option>Toscana</option>
      <option>Trentino-Alto Adige</option>
      <option>Umbria</option>
      <option>Valle d'Aosta</option>
      <option>Veneto</option>
   </select>
   <div class="lineheight"></div>
   <!-- for spacing height -->
</div>

[mdnet]

Per caso qualcuno ha delle info in merito ? Grazie e scusate il disturbo.

[KillerWorm]

Ciao, non sono pratico di bootstrap ma da qualche parte ho visto che bisognerebbe impostare l'attributo value per tutti i tag option.
Eventualmente, sul primo sarebbe da impostare una stringa vuota: value="".

Vedi se così si risolve.



[Mod]
- Quando si posta del codice sul forum è opportuno utilizzare i tag di formattazione (vedi regolamento di sezione). Per il momento ho provveduto io.

- L'argomento non riguarda il CSS. Nello specifico, sebbene tu stia usando bootstrap, si tratta più che altro di impostazioni relative a funzionalità degli elementi HTML. In particolare, con required, si parla di HTML5. Sposto nel relativo forum.

[carlomarangoni]

Con required dovrebbe funzionare! Sei sicuro non vada

[mdnet]

Buongiorno Carlo, purtroppo non funziona. Grazie

[Roby140569]

Ho inserito la tua porzione di codice in un mio form e funziona. Prova a postare il tuo form completo.

[luca200]

In generale, required funziona solo se il browser fa i controlli previsti dalle specifiche HTML5. A me risulta che solo Chrome li faccia, ad oggi. In particolare poi non so come funzioni di preciso con le select. Per il browser, ogni valore della lista che gli hai dato è equivalente, quindi ce ne sarà sempre uno selezionato.

[Roby140569]

In generale, required funziona solo se il browser fa i controlli previsti dalle specifiche HTML5. A me risulta che solo Chrome li faccia, ad oggi. In particolare poi non so come funzioni di preciso con le select. Per il browser, ogni valore della lista che gli hai dato è equivalente, quindi ce ne sarà sempre uno selezionato.

Con Firefox, a me, funziona.

[luca200]

E' vero, ero rimasto un po' indietro, ora i controlli li fanno anche Firefox e IE11.
Il problema è che con Firefox effettivamente il codice qui sopra funziona, mentre con Chrome e IE no, ma è Firefox che sbaglia. Da quel codice manca un elemento essenziale, che è il value="" nella prima option. Non avendo il valore vuoto, l'opzione non rispetta la definizione di placeholder, per cui è corretto che il required non funzioni. L'attributo disabled non disabilita l'opzione, ma disabilita l'intero campo qualora quell'opzione sia selezionata.

[Roby140569]

Già, ho fatto un test con Chrome ed effettivamente il mio form funziona, tranne la porzione di codice di mdnet.

mdnet, se sei ancora interessato, il tuo codice, per funzionare, deve diventare così:

<div class="col-md-6">
   <select class="form-control" name="Select_Regione" required>
      <option value="">Regione</option>
      <option>Abruzzo</option>
      <option>Basilicata</option>
      <option>Calabria</option>
      <option>Emilia-Romagna</option>
      <option>Friuli-Venezia Giulia</option>
      <option>Lazio</option>
      <option>Liguria</option>
      <option>Lombardia</option>
      <option>Marche</option>
      <option>Molise</option>
      <option>Piemonte</option>
      <option>Puglia</option>
      <option>Sardegna</option>
      <option>Sicilia</option>
      <option>Toscana</option>
      <option>Trentino-Alto Adige</option>
      <option>Umbria</option>
      <option>Valle d'Aosta</option>
      <option>Veneto</option>
   </select>
   <div class="lineheight"></div>
   <!-- for spacing height -->
</div>