G-Loot DS — select input validation

by Augustin Hiebel

HTML

<!-- Error -->
<div class="form-group form-select" data-error="Please choose an option.">
  <label for="favorite-agent">Favorite agent:</label>
  <select id="favorite-agent">
    <option disabled="">Choose an option</option>
    <option>Astra</option>
    <option>Breach</option>
    <option>Brimstone</option>
    <option>Chamber</option>
    <option>Cypher</option>
    <option>Fade</option>
    <option>Jett</option>
    <option>Kayo</option>
    <option>Killjoy</option>
    <option>Neon</option>
    <option>Omen</option>
    <option>Phoenix</option>
    <option>Raze</option>
    <option>Reyna</option>
    <option>Sage</option>
    <option>Skye</option>
    <option>Sova</option>
    <option>Viper</option>
    <option>Yoru</option>
  </select>
</div>

<!-- Success -->
<div class="form-group form-select" data-success="Good choice.">
  <label for="favorite-role">Favorite role:</label>
  <select id="favorite-role">
    <option disabled="">Choose an option</option>
    <option>Controller</option>
    <option>Duelist</option>
    <option>Initiator</option>
    <option>Sentinel</option>
  </select>
</div>

<!-- Attention -->
<div class="form-group form-select" data-attention="Are you sure?">
  <label for="favorite-map">Favorite map:</label>
  <select id="favorite-map">
    <option disabled="">Choose an option</option>
    <option>Ascent</option>
    <option>Bind</option>
    <option>Breeze</option>
    <option>Fracture</option>
    <option>Haven</option>
    <option>Icebox</option>
    <option>Split</option>
  </select>
</div>