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
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
A voir également:
- Validation formulaire : inactive ?
- Formulaire de contact le bon coin introuvable ✓ - Forum Réseaux sociaux
- Validation des données excel - Guide
- Commande en cours de validation fnac - Forum Consommation & Internet
- Formulaire de réclamation facebook - Guide
- Impossible d'utiliser ce numéro de téléphone pour la validation. - Forum Gmail
2 réponses
jordane45
Messages postés
38139
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 avril 2024
4 649
25 févr. 2021 à 20:56
25 févr. 2021 à 20:56
Bonjour,
Affiche la console de ton navigateur.. tu y verras un beau message d'erreur...
Affiche la console de ton navigateur.. tu y verras un beau message d'erreur...
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:
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 ;)
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 ;)
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."; } });Modifié le 26 févr. 2021 à 19:54
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 , donc je ne vois pas comment faire ?
26 févr. 2021 à 20:14
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){26 févr. 2021 à 20:54
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 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 = " "; } })26 févr. 2021 à 21:27
Il fallait laisser le premier