comment rendre obligatoire un choix dans un bouton radio

flexi2202

flexi2202 Le 20 mai 2021 à 08:22 (Édité le 20 mai 2021 à 08:23)

bonjour a tous j ai une formulaire avec 5 groupes de bouton radio et je souhaiterais qu un bouton soit cocher de façon obligatoire par groupe par l utilisateur

je n y connais rien en javascript j ai tente de modifier un code existant mais cela sans succès rien ne se passe

d avance merci pour la correction

<div class="form-group">
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
        <p>1. Avez vous déjà perler ?:</p>

<div>
  <input type="radio" id="oui" name="drone" value="oui"
         >
  <label for="oui">oui</label>
</div>

<div>
  <input type="radio" id="non" name="drone" value="non">
  <label for="non">Non</label>
</div>

<div>
  <input type="radio" id="juste_une_fois" name="drone" value="juste_une_fois">
  <label for="juste_une_fois">Juste une fois</label>
</div>
<div>
  <input type="radio" id="je_n_crois_pas" name="drone" value="je_n_crois_pas">
  <label for="je_n_crois_pas">je n'y crois pas</label>
</div>
        </div>
        <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
    <p> 2. Apres la visite de mon blog , seriez vous prêt a sauter le pas ?</p>

        <div>
  <input type="radio" id="oui" name="drone1" value="oui"
         >
  <label for="oui">oui</label>
</div>

<div>
  <input type="radio" id="non" name="drone1" value="non">
  <label for="non">Non</label>
</div>
<div>

  <input type="radio" id="peut_etre" name="drone1" value="peut_etre">
  <label for="peut_etre">Peut-etre</label>
</div>
</div>

<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p>3.Trouvez-vous des perles facilement ?</p>
            <div>
  <input type="radio" id="oui" name="drone3" value="oui"
         >
  <label for="oui">oui</label>
</div>

<div>
  <input type="radio" id="non" name="drone3" value="non">
  <label for="non">Non</label>
</div>  
</div>
        <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
    <p> 4. Connaissez vous des perleurs ?</p>
                <div>
  <input type="radio" id="oui" name="drone4" value="oui"
         >
  <label for="oui">oui</label>
</div>

<div>
  <input type="radio" id="non" name="drone4" value="non">
  <label for="non">Non</label>
</div>  
    </div>  

        <div class="card border-secondary text-secondary"style="margin-bottom:10px;">
    <p> 5.Que penses tu de mon blog?</p>

    <div>
  <input type="radio" id="tres_bien" name="drone5" value="tres_bien"
         >
  <label for="tres_bien">Tres bien</label>
</div>

<div>
  <input type="radio" id="bien" name="drone5" value="bien">
  <label for="bien">bien</label>
</div>

<div>
  <input type="radio" id="satisfaisant" name="drone5" value="satisfaisant">
  <label for="satisfaisant">Satisfaissant</label>
</div>
    <div>
  <input type="radio" id="faible" name="drone5" value="faible">
  <label for="faible">faible</label>
</div>      

<div>
<div class="form-group">
  <input type="submit" name="send" value="Envoyer le message"/>

                 <script>
       //on selectionne notre form sur lequel on souhaite écouter les évenements

       const formulaire = document.querySelector('#sectionForm');

       //si on clic sur "Envoyer" on vérifi si il y a un minimum de case cochées:

      formulaire.onsubmit = function(e){
        let verif1 = verifier_si_cochee('drone');
        let verif2 = verifier_si_cochee('drone1');
        let verif3 = verifier_si_cochee('drone3');
        let verif4 = verifier_si_cochee('drone4');
        let verif5 = verifier_si_cochee('drone5');

        if(verif1 && verif2  && verif3  && verif4  && verif5   ) {
          return true;
        } else {
          e.preventDefault();
          //et on bloque le soumission du form:
          return false;
        }
      }

      function verifier_si_cochee(name_input) {
        //avec cette fonction, on boucle chaque case et retourne true si ya une case cochée
        let input=formulaire.querySelectorAll('input[name="'+name_input+,'"]:checked')
        if( input.length > 0 ){
          return true;
        }else{
          alert("Vous devez choisir au moins une case dans :" + name_input);
          return false;
        }
      }

      </script>
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte