A l’instar du classique formulaires de commande sur internet, par exemple, avec sa fameuse case à cocher de validation des CGV (Conditions Générales des Ventes) avant finalisation de la commande en ligne, ce billet vous permettra de valider un formulaire selon un choix prédéfini dans un menu déroulant.
– Si le bon choix est fait, le formulaire est envoyé au clic sur le bouton d’envoi.
– Sinon, on peut déclencher une boîte d’alerte et bloquer l’envoi du formulaire.

C’est ce que l’on appelle un choix opt-in : il est nécessaire de valider une option exclusive, que ce soit une case à cocher ou un menu déroulant.

Étape 1

Il faut commencer par créer le menu déroulant dans un formulaire :

<form action="test.php" method="get">

  <select name="optin" id="optin">
    <option value="oui">Je choisis oui</option>
    <option value="non">Je choisis non</option>
  </select>
  <input type="submit" onclick="return valideselect()" />  
  
</form>
									

Étape 2

Il ne nous reste qu’à créer la fonction JavaScript qui validera (ou non) le choix de l’internaute :

function valideselect() {  
   var select = document.getElementById('optin');
   var choice = select.selectedIndex;
   var text =  select.options[choice].value;
  
  // si la valeur choisie est 'oui'
  if(text == 'oui') {
    // alors on envoie le formulaire
    return true;
  }
  else {
    // sinon on affiche un message et on bloque l'envoi
    alert('Veuillez choisir 'oui' SVP');
    return false;
  }
}
									

Validation JavaScript d’un menu déroulant: c’est fait !