jQuery: verificare se l'utente ha scelto un'opzione non valida in un campo select

Con jQuery possiamo verificare se l'utente ha selezionato un valore non valido in un campo select.

Abbiamo questo form HTML:

<form action="#" method="post" id="test">
    <div>
        <label for="scelta">Scelta:</label>
        <select id="scelta" name="scelta">
            <option value="">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>

Si tratta di stabilire se l'utente ha selezionato l'unico valore non valido, ossia la prima opzione che ha un valore vuoto. Quindi con jQuery dobbiamo impostare l'evento change ed effettuare una verifica sul valore dell'opzione selezionata.

$( "#scelta" ).on( "change", function() {
    var selectedValue = $( "option:selected", "#scelta" ).val();
    if( selectedValue === "" ) {
        // Scelta non valida
    }
});