Validation formulaire : inactive ?
charline159
Messages postés
208
Date d'inscription
Statut
Membre
Dernière intervention
-
charline159 Messages postés 208 Date d'inscription Statut Membre Dernière intervention -
charline159 Messages postés 208 Date d'inscription Statut Membre Dernière intervention -
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
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>
A voir également:
- Validation formulaire : inactive ?
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
- Pb retour sur site marchand après validation du paiement - Forum Consommation & Internet
2 réponses
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 ;)
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."; } });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 ?
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){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 = " "; } })Il fallait laisser le premier