Comment rendre obligatoire un input dans chaque groupe de bouton avec du javasc [Résolu]

  <form method="post" id="sectionForm">
			              <div class="row">
                  <div class="col-sm text-center">
               <div class="form-label-group">
                 
               </div> </br>
              <div class="form-label-group">
                     <input type="checkbox" name="technique[]" value="perle">perle</br>
                     <input type="checkbox" name="technique[]" value="graine">graines</br>
                     <input type="checkbox" name="technique[]" value="asticot">asticot/pinkies</br>
                     <input type="checkbox" name="technique[]" value="pelets">pelets</br>
					  <input type="checkbox" name="technique[]" value="vaseux">vaseux</br>
              </div>
			    </br>
               <div class="form-label-group">
                    <button type="button" class="btn btn-info"> <h3>meteo: </h3></button>
                  </div>
               <div class="form-label-group">
                   
                  </div>
              </br>
             <div >
                   <input type="checkbox" name="meteo[]" value="vent">vent</br>
                     <input type="checkbox" name="meteo[]" value="pluie">pluie</br>
                     <input type="checkbox" name="meteo[]" value="neige">neige</br>
                     <input type="checkbox" name="meteo[]" value="soleil">soleil</br>
                     <input type="checkbox" name="meteo[]" value="nuageux">nuageux</br>
                  </div>
		    <div class="form-label-group">
                     <input type="submit" class="form-control"name="submit" value="Valider" />
                  </div>
            </form>
            <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(){

               if(verifier_si_cochee('technique[]') && verifier_si_cochee('meteo[]'))

               return true;

               else {

               //on affiche un petit message

               (alert("Message à afficher");

               //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+'"]')

               for (let i = 0; i < input.length; i++) {

               if(input[i].checked)

               return true;

               }

               //sinon on retourne false

               return false;

               }

            </script>

      <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('technique[]');
        let verif2 = verifier_si_cochee('meteo[]');

        if(verif1 && verif2) {
          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>

 let input=formulaire.querySelectorAll('input[name="'+name_input+'",]:checked')

<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>
<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>
  <input type="radio" id="tres_faible" name="drone5" value="tres_faible">
  <label for="tres_faible">Tres faible</label>
</div>
 <div>
  <input type="radio" id="faible" name="drone5" value="faible">
  <label for="faible">faible</label>
</div> 

  <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>

       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;
        }
      }

<?php
//Base de donnée
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
if(!empty($_POST["send"])) {
//Si les variable $_POST existent et ne sont  pas vide, on récupère la valeur, sinon je mets la variable $nom à NULL
$name = !empty($_POST['name']) ? $_POST['name'] : NULL;
$email = !empty($_POST['email']) ? $_POST['email'] : NULL;
$drone = !empty($_POST['drone']) ? $_POST['drone'] : NULL;
$drone1 = !empty($_POST['drone1']) ? $_POST['drone1'] : NULL;
$drone3 = !empty($_POST['drone3']) ? $_POST['drone3'] : NULL;
$drone4 = !empty($_POST['drone4']) ? $_POST['drone4'] : NULL;
$drone5 = !empty($_POST['drone5']) ? $_POST['drone5'] : NULL;
// les variables sont pretes a etres utilisees
$name = $_POST["name"];
$email = $_POST["email"];
//$subject = $_POST["subject"];
$messager = $_POST["messager"];
$drone = $_POST["drone"];
$drone1 = $_POST["drone1"];
$drone3 = $_POST["drone3"];
$drone4 = $_POST["drone4"];
$drone5 = $_POST["drone5"];
//on etablit une connexion securisee
$bdd = mysqli_connect("localhost", "uperle", "S02", "u4346erle");
/* Vérification de la connexion */
if (mysqli_connect_errno()) {
    printf("Échec de la connexion : %s\n", mysqli_connect_error());
    exit();
	}
// on insere les variables dans la table		
$req_pre = mysqli_prepare($bdd, "INSERT INTO contact (name, email,  message,Avez_vous_deja_perler,seriez_vous_pret_a_sauter_le_pas,Trouvez_vous_des_perles_facilement,Connaissez_vous_des_perleurs,Que_penses_tu_de_mon_blog) VALUES(?, ?, ?, ?, ?, ?, ?, ?)");
// on blind nos variables 
mysqli_stmt_bind_param($req_pre, "ssssssss", $name, $email, $messager, $drone, $drone1, $drone3, $drone4, $drone5 );
mysqli_stmt_execute($req_pre);
printf("Erreur : %s.\n", mysqli_stmt_error($req_pre));
    /* Ferme la commande */
    mysqli_stmt_close($req_pre);
/* Ferme la connexion */
mysqli_close($bdd);
//on teste pour voir si tout est ok
if($req_pre){
		$db_msg = "Vos informations de contact sont enregistrées avec succés.";
		$type_db_msg = "success";
		// header("location:acceuil.php");
	}else{
		$db_msg = "Erreur lors de la tentative d'enregistrement de contact.";
		$type_db_msg = "error";
	}
}
//fin de la transmission des données dans la table
//l'envoie du mail
if(!empty($_POST["send"])) {
$messager = $_POST["messager"];
$name = $_POST["name"];
$email = $_POST["email"];
$drone = $_POST["drone"];
$drone1 = $_POST["drone1"];
$drone3 = $_POST["drone3"];
$drone4 = $_POST["drone4"];
$drone5 = $_POST["drone5"];
// on entre un ou Plusieurs destinataires
     $to  = 'perroquet666@hotmail.com'; // notez la virgule
// Sujet
$subject= "une reussite";
// message
     $message = '
     <html>
      <head>
       <title>Calendrier des anniversaires pour Août</title>
      </head>
      <body>
       <p>Voici les reponses au sondage</p>
	    <tr>
         <td>le prenom     </td><td>'.$name .'</td></br>
        </tr>
	   <tr>
         <td>l adresse mail    </td><td>'.$email .'</td></br>
        </tr>
	   <tr>
         <td>le textera    </td><td>'.$messager .'</td></br>
        </tr>
	   
       <table>
        <tr>
         <th>questrion</th><th>reponses</th> 
        </tr>
		
        <tr>
         <td>1. Avez vous déjà perler ?</td><td>'.$drone.'</td>
        </tr>
                <td>2. Apres la visite de mon blog , seriez vous prêt a sauter le pas ?</td><td>'.$drone1.'</td>
        </tr>
		 <tr>
         <td>3.Trouvez-vous des perles facilement ?</td><td>'.$drone3.'</td>
        </tr>
		 <tr>
         <td>4. Connaissez vous des perleurs ?</td><td>'.$drone4.'</td>
        </tr>
		 <tr>
         <td>5.Que penses tu de mon blog?</td><td>'.$drone5.'</td>
        </tr>
		
        </tr>
       </table>
      </body>
     </html>
     ';
// Pour envoyer un mail HTML, l'en-tête Content-type doit être défini
     $headers[] = 'MIME-Version: 1.0';
     $headers[] = 'content-type: text/html; charset=utf-8';
// En-têtes additionnels
     //$headers[] =  "From: " . $name . "<". $_POST["email"] .">\r\n";
	 $headers[] = 'From: '.$email."\r\n".
    'Reply-To: '.$name."\r\n" .
    'X-Mailer: PHP/' . phpversion();
       // Envoi
	   //var_dump($headers);
 	if(mail($to, $subject, $message, implode("\r\n", $headers))){
// success message
echo "Success!<br />";
}else{
// error message
echo "Fail<br />";
}
}      
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

		<script type="text/javascript" src="contact.js"></script>
    <title>Hello, world!</title>
  </head>
	<body>
		<div class="container"style "max-width:50%">
			  <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post">
		    <h3>Formulaire de contact</h3>
				  <div class="form-group">
			  <label for="name">Nom:<span>*</span></label>
      <input type="text" id="name" name="name"class="form-control" placeholder="Nom">
    </div>
				  <div class="form-group">
    <label for="email">Email:</label>
    <input type="texte" id="email" name="email"class="form-control"  placeholder="Email">
  </div>
		 		 <!-- <div class="form-group">
			  <label for="subject">Sujet:</label>
      <input type="text" id="subject" name="subject"class="form-control" placeholder="Demande de renseignement">
    </div>-->
	  		<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>
  <input type="radio" id="tres_faible" name="drone5" value="tres_faible">
  <label for="tres_faible">Tres faible</label>
</div>
	<div>
  <input type="radio" id="faible" name="drone5" value="faible">
  <label for="faible">faible</label>
</div>	
 </div>
<div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>	
		 <div class="form-group">
    <label for="messager">Veux tu ajouter une remarque quelconque ...</label>
    <textarea name="messager"class="form-control" id="messager" rows="3" placeholder="Message..."></textarea>
  </div>
  
 
    <input type="submit" name="send" value="Envoyer "/>
		 	 <script>
      ormulaire.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>
			  </form>
	    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

 <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post">

<form method="post" id="sectionForm">

 <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post">

<form method="post" id="sectionForm">

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

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

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