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

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

15 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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
  2. flexi2202 Messages postés 3640 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
  3. flexi2202 Messages postés 3640 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
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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
  4. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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

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

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

Bouton ON/OFF : O ou I, quel côté est allumé
Stargirlfr -
kaparzo23 -

12 réponses
Ecran BenQ "Input signal out of range"
marlene -
usman000 -

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

3 réponses
Arrêt/démarrage via Bouton ON/OFF de l'alim
kekliard -
baaabu -

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

18 réponses