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

Résolu
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 15
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 2 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
Réponse 3 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 4 / 15
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 5 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Dans ce cas ce ne sont pas des checkbox que tu dois utiliser mais des radio button
0
Réponse 6 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ah ok et donc le code javascript ne changera pas apparemment
0
Réponse 7 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Dans le JS tu n'as pas mis le bon name...
0
Réponse 8 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
Réponse 9 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 10 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
Réponse 11 / 15
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
  
       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
Réponse 12 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 13 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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
Réponse 14 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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
Réponse 15 / 15
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
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

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
Bouton enfoncé
Elena.marques -
Elena.marques -

2 réponses
instagram comment supprimer un groupe que l on a crée
jess.mi -
JulieGe -

3 réponses