Sujet Précédent Sujet Suivant

Validation formulaire : inactive ?

Fermé
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 25 févr. 2021 à 20:43
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 - 3 mars 2021 à 12:14
Bonjour, j'essaie de mettre en place la validation d'un formulaire simple avec le code suivant, mais il ne se passe strictement rien.

Sauriez-vous me dire d'où vient le problème s'il vous plaît ?

Cordialement 

// require(["validate.js"], function(validate) {
//   // ...
// });


var selectAge = document.getElementById('age');

for (var i = 1; i<=100; i++){

	// création de l'option à choisir
    var choice = document.createElement('option');
    choice.value = i;
    choice.innerHTML = i;
    // ajout du nouvel élément
    selectAge.appendChild(choice);
}



var choixLangue = document.getElementById("langues").getElementsByTagName("input");

choixLangue.addEventListener("change", function(e){

	var fr = document.getElementById("fr");
	var en = document.getElementById("en");
	var jp = document.getElementById("jp");

	var msgAlerte = document.getElementById("formlangues").getElementsByTagName("label");

	if (!fr.value && !en.value && !jp.value){
		msgAlerte.innerHTML = "Veuillez choisir au moins une langue.";
		e.preventDefault();
	}	
});



var commentaire = document.getElementById("formcommentaire");
commentaire.addEventListener("submit", function(e){
	e.preventDefault();

	var name = document.getElementById("name");
	var commentaire = document.getElementById("commentaire");

	var msgAlerteName = document.getElementById("formname");
	if (!name.value){
		msgAlerteName.innerHTML = "Veuillez indiquer un nom.";
		e.preventDefault();
	}

	var msgAlerteCommentaire = document.getElementById("formcommentaire");
	if (!commentaire.value){
		msgAlerteCommentaire.innerHTML = "Veuillez laisser un message.";
		e.preventDefault();
	}

	
});




<!DOCTYPE html>
<html>

	<head>
		<title>Website</title>		
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<meta charset="utf-8">
  		<link rel="stylesheet" href="page1style.css" />
	</head>
  
  <body>
    <!------------------------- HEADER ------------------------->
    <header>
      <div id="navbackground">
        <nav>
            <a href="#home" class="active">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
            <a href="#search" id="search">
              <!--<form><input type="search"/>--><input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/></form>
            </a>
        </nav>
      </div>

      <!------------------------- IMG ------------------------->
      <div id="imgbackground">
        <image src="islandCrop.svg" x="0" y="0" id="island" />
      </div>
    </header>
    
    <!------------------------- SECTION ------------------------->
    <section>
      <p class='firstparagraph'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus mi odio, sed vulputate diam placerat et. Sed cursus euismod diam a viverra. Integer commodo fringilla massa non pretium.
      </p>

      <p>
       Integer ultrices tempor diam, ac vestibulum enim sagittis quis. In vulputate justo id molestie dictum. Aenean fringilla vel massa vel placerat. In mattis massa nec sem egestas condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus ante, blandit vel ultrices ut, faucibus a lorem. Morbi faucibus tempor mi, id efficitur elit dictum ut. 
      </p>

      <p>Aliquam bibendum nibh ex, sed sagittis dolor dignissim ut. Nulla facilisi. Phasellus euismod convallis libero vitae mattis. Cras mattis fringilla semper. Praesent fermentum, ex et dictum scelerisque, velit odio interdum urna, vitae tempus diam nulla quis nibh. Vestibulum vel ornare nibh. Maecenas eu dui metus. Donec luctus, turpis quis blandit faucibus, nisl arcu posuere dui, quis auctor augue nisl quis ligula. Nulla ligula lectus, commodo et suscipit quis, fermentum in nulla. Vivamus congue ipsum purus, id hendrerit nulla maximus quis. Sed non leo eros.
      </p><br/>   

      <!------------------------- FORM ------------------------->   
    
      <form action="action.php" id="formulaire"> <!-- wrapper flex grid -->

        <!-- TITLE -->
        <div id="formtitle"> Contact</div>

          <!-- 1 NAME -->
          <div id="formname">
            <label for="name">Nom</label>
            <input type="text" id="name" name="name" placeholder=" name" /> <!--required-->
          </div>


          <!-- 2 AGE -->
          <div id="formage">
            <label for="age"> Age</label>
            <select id="age" name="age"></select>
          </div>        


          <!-- 3 SEXE -->
          <div id="formsexe">
            <label for="sexe">Sexe</label>
              <optgroup id="sexe">          
                <option>
                  <input type="radio" id="sexe" name="sexe" value="H" checked/>
                  <label for="huey" class="formsexelabel">H</label>
                </option>

                <option>
                  <input type="radio" id="sexe" name="sexe" value="F"/>
                  <label for="huey" class="formsexelabel">F</label>
                </option>
              </optgroup>
          </div>


          <!-- 4 LANGUE -->
          <div id="formlangues">
            <label for="langues[]">Langue</label>
            <optgroup id="langues">
              <option id="optfr">
                <input type="checkbox" id="fr" name="langues[]" value="Français" checked>
                <label for="langues[]">Fr</label>
              </option>

              <option>
                <input type="checkbox" id="en" name="langues[]" value="English">
                <label for="langues[]">En</label>
              </option>

              <option>
                <input type="checkbox" id="jp" name="langues[]" value="Japonais">
                <label for="langues[]">JP</label>
              </option>         
            </optgroup>
          </div>


          <!-- 5 LOISIRS -->
          <div id="formloisirs">
            <label id="loisirs">Loisirs</label>
              <select id="loisirs" name="loisirs" multiple>            
                <option value="programmation" id="programmationloisir">Programmation</option>
                <option value= "musique">Musique</option>
                <option value="cinema">Cinéma</option>
                <option value="nuages">Nuages</option>            
              </select>
          </div>



          <!-- 6 COMMENTAIRE -->
          <div id="formcommentaire">
            <label for="commentaire"><!--commentaire--></label>
            <textarea id="commentaire" name="commentaire" placeholder="commentaire"></textarea>
          </div>

          <!-- BOUTON -->
          <div id="formenvoyer">
            <input type="submit" value="Envoyer"/>
            <!-- <image src="cloudCrossing2.svg" x="0" y="0" id="cloudCrossing" /> -->
          </div>
      </form>

      <p style="color: red" id="erreur"></p>
    </section>



    <!------------------------- FOOTER ------------------------->
    <footer>
      <p>
      Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="little cloud" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/>
      </p>
    </footer>

    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script> -->
    <script src="page1script.js"></script>
  </body>

</html>

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712
25 févr. 2021 à 20:56
Bonjour,

Affiche la console de ton navigateur.. tu y verras un beau message d'erreur...
0
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712
25 févr. 2021 à 21:21 
const name = document.getElementById("name");
const commentaire = document.getElementById("commentaire");
const formcommentaire = document.getElementById("formcommentaire");
const msgAlerteName = document.getElementById("formname");
const fr = document.getElementById("fr");
const en = document.getElementById("en");
const jp = document.getElementById("jp");
const choixLangue = document.querySelectorAll("input[name='langues[]']");
const selectAge = document.getElementById('age');
const msgAlerte = document.getElementById('erreur');


for (var i = 1; i<=100; i++){

	// création de l'option à choisir
    var choice = document.createElement('option');
    choice.value = i;
    choice.innerHTML = i;
    // ajout du nouvel élément
    selectAge.appendChild(choice);
}




//Vérifie si au moins une checkbox est cochée..
function checkLangues(){
  var checkboxesChecked = [];
  [...choixLangue].forEach (function(el){
      console.log('el.checked',el.checked);
      if (el.checked) {
        checkboxesChecked.push(el);
      }
     
  });
   return checkboxesChecked.length > 0 ? true : false;
}


[...choixLangue].forEach (function(el){
  el.addEventListener("click", function(e){
    console.log('CLICK',e);
    if(!checkLangues()){
      msgAlerte.innerHTML = "Veuillez choisir au moins une langue.";
    }
  });
});



formcommentaire.addEventListener("submit", function(e){
	e.preventDefault();
	if (!name.value){
		msgAlerteName.innerHTML = "Veuillez indiquer un nom.";
		e.preventDefault();
	}


	if (!commentaire.value){
		msgAlerteCommentaire.innerHTML = "Veuillez laisser un message.";
		e.preventDefault();
	}

  if(!checkLangues()){
     msgAlerte.innerHTML = "Veuillez choisir au moins une langue.";
  }

	
});
0
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1 > jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024
Modifié le 26 févr. 2021 à 19:54
Salut et merci pour ton aide.

J'ai essayé mais je n'arrive pas à vérifier si ça marche car le formulaire fait comme s'il était envoyé. Donc même si le formulaire n'est pas rempli correctement, je peux l'envoyer, et les messages d'erreurs ne s'affichent même pas (sauf pour les langues).

Pourtant il y a bien 
e.preventDefault();
, donc je ne vois pas comment faire ?
0
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712 > charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022
26 févr. 2021 à 20:14
Il ne sert à rien de multiplier les e.preventDefault(); ( je ne les avais pas vu quand j'ai répondu hier .. n'ayant axé ma réponse que sur la vérif des langues...

De plus, tu n'as pas mis le addeventlistener sur le bon élément ...
C'est sur le <form> qu'il faut le mettre 
const formulaire = document.getElementById("formulaire");




formulaire.addEventListener("submit", function(e){
0
charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022 1 > jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024
26 févr. 2021 à 20:54
effectivement, je n'avais pas vu, j'ai corrigé et c'est bon.
J'ai un peu modifié et adapté le code selon ce que je souhaitais.
Au final, j'ai enlevé le e.preventDefault() et j'ai mis un 
return false;
si les champs n'étaient pas remplis, mais le formulaire s'envoie quand même. C'est normal ? 

const name = document.getElementById("name");
const commentaire = document.getElementById("commentaire");
const formcommentaire = document.getElementById("formcommentaire");
const fr = document.getElementById("fr");
const en = document.getElementById("en");
const jp = document.getElementById("jp");
const choixLangue = document.querySelectorAll("input[name='langues[]']");
const selectAge = document.getElementById('age');
const msgAlerte = document.getElementById('erreur');

const alertComment = document.getElementById('commentaire');
const alertName = document.getElementById("name");


// age choix
for (var i = 1; i<=100; i++){

	// création de l'option à choisir
    var choice = document.createElement('option');
    choice.value = i;
    choice.innerHTML = i;
    // ajout du nouvel élément
    selectAge.appendChild(choice);
}




//Vérifie si au moins une checkbox est cochée..
function checkLangues(){
  var checkboxesChecked = [];
  [...choixLangue].forEach (function(el){
      console.log('el.checked',el.checked);
      if (el.checked) {
        checkboxesChecked.push(el);
      }
     
  });
   return checkboxesChecked.length > 0 ? true : false;
}


[...choixLangue].forEach (function(el){
  el.addEventListener("click", function(e){
    console.log('CLICK',e);
    if(!checkLangues()){
      msgAlerte.innerHTML = "Veuillez choisir au moins une langue.";
    }
  });
});



const formulaire = document.getElementById('formulaire');

formulaire.addEventListener("submit", function(e){
	

	if (!name.value){
		alertName.placeholder = "Veuillez indiquer un nom.";
		return false;
	}

	if (!commentaire.value){
		alertComment.placeholder = "Veuillez laisser un message.";
		return false;
	}

  	if(!checkLangues()){  		
  		msgAlerte.innerHTML = "Veuillez choisir au moins une langue.";
  		return false;		
  	}
  	  

	
});

formulaire.addEventListener("click", function(e){
	if(checkLangues()){
  		msgAlerte.innerHTML = " ";
	}
})
0
jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712 > charline159 Messages postés 208 Date d'inscription lundi 14 août 2017 Statut Membre Dernière intervention 22 juin 2022
26 févr. 2021 à 21:27
Je ne t'ai pas dit d'enlever tous les préventedefault ...
Il fallait laisser le premier
0
Réponse 2 / 2
Altrax
Modifié le 27 févr. 2021 à 14:04
return false; sur l'évenement submit empêche l'envoi duformulaire donc ça dépends de l'algorithme et permet éventullement de se passer de .preventDefault; ainsi que rajouter une sécurité :
dans votre code ça implique que la 1ère erreur rencontrée arrête les autres vérifications, donc ne prends pas en compte les autres erreurs.
Un return fait directement 'sortir' du bloc de code(fonction) et arrête immédiatement le code à l'endroit où est effectué le return.

Avec la variable texte qui doit être vide on peut écrire comme ça pour le même résultat: 
document.getElementById("formulaire").addEventListener('submit',function(e){
var verifForm='';
//-- vérif des champs et incrémentation du texte si erreur
...
if(verifForm.length>0){// length compte le nombre de caractère(s) de la chaîne
// 0 pour une chaîne vide, >0 quand du texte
msgAlerte.innerHTML=verifForm;
return false;
}
//-- sans preventDefault le formulaire est envoyé
// pas besoin de rajouter submit donc et en cas d'erreur la valeur false bloque l'envoi
});

C'est en effet ce qui paraît le lus optimisé(le moins de code à écrire) tant qu'on est à l'aise avec toutes les notions. A tester et vérifier quand même ;)
0

Discussions similaires

Problème de restrictions
SuperAmbi -
Pat -

5 réponses
Impossible d'utiliser ce numéro de téléphone pour la validat
Marie -
MPMP10 -

1 réponse
Impossible d'utiliser numéro de téléphone validation
Rob5 -
Panth33ra -

4 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
Gmail impossible sans numéro de téléphone
Gogole -
Besoindesavoir -

5 réponses