jQuery: validazione degli elementi select ed option

Giovedì scorso ho ricevuto le prime due e-mail dal sito da quando avevo rielaborato il form dei contatti. La prima e-mail, purtroppo, mostrava il campo dell'oggetto con un valore che non doveva essere presente, ossia il testo dell'elemento option privo di valore. Dopo aver sistemato la validazione lato server, ho capito che la verifica da me fatta con jQuery non era sufficiente. Ho svolto alcune ricerche e sono pervenuto a questa soluzione che spero vi possa essere utile. Vediamola insieme.

Abbiamo questo form:

<form action="#" method="post" id="test">
    <div>
        <label for="scelta">Scelta:</label>
        <select id="scelta" name="scelta">
            <option value="" disabled="disabled">Scegli</option>
            <option value="arte">Arte</option>
            <option value="scienza">Scienza</option>
            <option value="web">Web</option>
        </select>
    </div>
    <p><input type="submit" value="Invia" id="submit" name="submit" /></p>
</form>

Abbiamo due possibilità per capire se l'utente ha selezionato un valore valido:

1. usare val() nel contesto di un oggetto jQuery
2. usare value nel contesto di un oggetto DOM

C'è una differenza sostanziale tra i due approcci: il primo opera solo su stringhe, mentre il secondo opera anche con valori che possono essere ricondotti a quelli booleani. In altre parole, la proprietà value è molto più affidabile.

Quindi possiamo scrivere:

var select = $('#scelta', $(this));
var option = $('option:selected', select);
               
if(!option[0].value) {
                    
  $('<span class="error"/>').text('Devi scegliere un argomento').
  appendTo(that.element.find('div'));
                
} else {
                   
  $('<span class="success"/>').text('Hai scelto').
  appendTo(that.element.find('div')); 
                   
}

Il selettore :selected agisce solo sull'opzione che è stata effettivamente selezionata. Quindi usiamo la notazione degli array per trasformare l'elemento in un oggetto DOM e accedere alla sua proprietà value. E a quel punto effettuiamo il nostro test.

Potete visionare l'esempio e il codice completo in questa pagina.