Comment rendre obligatoire un input dans chaque groupe de bouton avec du javasc

Résolu/Fermé
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 19 mai 2021 à 19:10
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 21 mai 2021 à 00:16
bonjour à tous
j'ai un formulaire et je souhaiterais que l'utilisateur soit oblige de choisir un choix pour le premier groupe de bouton et soit oblige de choisir un bouton pour le deuxième groupe de bouton avec une alerte javascript
merci de l'aide

  <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>
A voir également:

15 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 mai 2021 à 19:18
Bonjour
Il suffit de compter combien de checkbox son cochées.
Si le nombre = 0 c'est qu'il n'y en a pas et dans ce cas tu peux afficher un message d'erreur.
Si tu prends 2 minutes pour rechercher sur le net, tu trouveras de nombreuses discussion à ce sujet et les exemples qui vont avec.
Il me semble que tu as jQuery sur ton site c'est encore plus facile.

Reviens nous voir avec tes tentatives si jamais tu rencontres des soucis.
1
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
19 mai 2021 à 20:03
bonjour Jordane

merci pour la reponse
oui c est vrai que des exemples il en pleut sur le net
mais comme toujours c est juste pour un groupe de input

je n ai trouve aucun formulaire avec 2 groupes comme mon exemple

je vais continuer a chercher ...

j avais bien trouve un truc mais malheureusement cela ne fonctionne pas trop bien
en dernier recours et si je trouve rien
je viendrais le présenter
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
19 mai 2021 à 20:21
alors voila j ai bien une alert qui arrive lorsque l utilisateur ne coche pas au moins un bouton dans les groupes de input

mais le soucis que je rencontre c est avec la boite alert
en dessous du formulaire a chaque tentative il y a un message qui apparaît
et ensuite deuxième soucis
l utilisateur peux cocher plus d une case par groupe de input


c est un code que j ai trouve
car en php c est deja limite de chez limite mais en javascript
c est nul

  <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>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 mai 2021 à 20:43
Je ne comprends pas le second problème...
L'utilisateur peut cocher plusieurs cases par groupe... Ben oui c'est normal....
Tu veux qu'il ne puisse en cocher qu'une seule par groupe ???
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 mai 2021 à 21:10
pour le code js, voici ton code corrigé
      <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>

par contre, je n'ai toujours pas compris ta seconde question...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
19 mai 2021 à 22:05
merci Jordanne c est génial , c est super gentil
je n ai pas encore testé

Tu veux qu'il ne puisse en cocher qu'une seule par groupe ???
oui voila 1 seul bouton par groupe
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 mai 2021 à 22:21
Dans ce cas ce ne sont pas des checkbox que tu dois utiliser mais des radio button
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
19 mai 2021 à 22:25
ah ok et donc le code javascript ne changera pas apparemment
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié le 19 mai 2021 à 23:12
je vais donc tester l exemple que tu m as donne avec ce formulaire ou l utilisateur peux cocher plusieurs cases dans chaque groupe

mais j ai un autre formulaire ou la j ai
5 groupe de boutons radios
je n ai aucun message d erreur rien

je pense que cela doit provenir de cette ligne pourtant il n y a que des name
donc cela devrait fonctionner comme l autre formulaire

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

voici le code
<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>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 mai 2021 à 23:15
Dans le JS tu n'as pas mis le bon name...
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
19 mai 2021 à 23:43
merci jordane

mais pourtant dans l autre formulaire les name était technique et météo

et dans celui ci ce sont
drone
drone1
drone3
drone4
drone5

je viens de faire un essai en enlevant les [ ]

mais cela ne fonctionne pas non plus
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
20 mai 2021 à 07:41
bonjour a tous
le premier script fonctionne sans problème encore un grand merci
par contre pour le deuxième j ai toujours pas trouve la solution
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
20 mai 2021 à 07:45
Je suppose que si tu regardes dans la console js de ton navigateur tu dois y voir une erreur...
L'erreur se trouve à cette ligne de code:
  let input=formulaire.querySelectorAll('input[name="'+name_input+'",]:checked')


Je te laisse la trouver...
(Indice: il y a un caractère en trop..)
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
20 mai 2021 à 08:07
merci jordane
mais dans ma console je n ai pas la même ligne d erreur
dans le même temps et sans rien connaître j ai essaye d enlever le + avant name_input puis après
la virgule
car je ne vois ou pourrait être ce caractère de trop

je te fais une copie d écran de la ligne de l erreur

0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
20 mai 2021 à 08:29
       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;
        }
      }


Pense bien à vider le cache de ton navigateur après chaque modification de code JS ou CSS
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
20 mai 2021 à 15:49
oui c est ce que je fais a chaque fois

merci jordane pour le code mais cela n a pas fonctionné
j ai toujours la même erreur dans la console
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
20 mai 2021 à 17:03
Le code que je t'ai donné fonctionne parfaitement.
Je pense que tu as un souci sur ton fichier.....
Supprime le et recréé le.
Vide bien le cache du navigateur, essaye même avec un autre...
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
20 mai 2021 à 20:07
bonsoir Jordane
j ai passe tout l après midi a effectuer des tests mais cela ne passe pas malheureusement
j ai tout recommence plusieurs fois

peut être une chose qui m échappé au niveau du code

quoi qu il en soit je te le présente en entier

<?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>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
20 mai 2021 à 20:31
Sur la ligne 304 pour le code que tu nous montres tu as oublié la première lettre du mot formulaire...
Tu as également supprimer une ligne qui se trouvait avant qui permettait d'initialiser cette variable formulaire la ligne qui commençait par const formulaire = ...
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié le 20 mai 2021 à 22:27
bonsoir jordane
un grand merci pour cet oubli mais c est lors de mon dernier essai que cette partie a été oublie
voila j ai remis le bon code

mais cela ne fonctionnait pas
après avoir essayé encore et encore j ai compris ce qui ce passait

ma ligne de début de formulaire est celle ci
 <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post">


et sur l autre formulaire

le code etait celui ci
<form method="post" id="sectionForm">


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


par

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


cela fonctionne

donc je suppose que la ligne a changer dans ton script est

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


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



est il possible d enlever le message d erreur

"empêcher cette page d ouvrir des dialogues supplémentaires"

et encore merci cela fessait très longtemps que je cherchais après cela
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
21 mai 2021 à 00:16
aie aie

je pense que j ai trop manipulé le code
je viens donc de comprendre

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

tout dépend du ID=

donc plus aucun soucis et concernant
"empêcher cette page d ouvrir des dialogues supplémentaires"

cela est du au navigateur
donc on ne sait rien y faire
ou alors du code plus complet

encore merci pour l aide

je passe en résolu
0