Contrôle formulaire : alert avec 1 seul message récapitulatif

Version imprimable

Salut tout le forum.

J’ai besoin de votre aide.

je crée un scripts en Javascript qui vérifie le contenu d’un formulaire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
function controleCompteRendu(){
 
	var autorisation = true;
 
	// Si système est vide
	if(compteRendu.elements['systeme'].value == ""){
		alert("Il manque la désignation du système.");
		autorisation = false;
	}
 
	// Si intervention_realisee est vide
	if(compteRendu.elements['intervention_realisee'].value == ""){
		alert("Il manque la description de l'intervention réalisée.");
		autorisation = false;
	}
 
	// Si resultat est vide
	if(compteRendu.elements['resultat'].value == ""){
		alert("Il manque le résultat de l'intervention.");
		autorisation = false;
	}
 
	// Si cout_horaire est vide
	if(compteRendu.elements['cout_horaire'].value == ""){
		alert("Il manque le coût horaire de main d'œuvre.");
		autorisation = false;
	}
 
	return autorisation;
}

Est-il possible de programmer pour n'avoir qu'une seule alert récapitulative de tout ce qui manque, avec les bons messages adaptés à ce que l'utilisateur a oublié ?

Merci pour votre aide.

Pour faire cela, vous pouvez stocker les messages de base dans un tableau pour construire ensuite le message complet.

Pour l'affichage, à la place du "alert", je vous conseille d'afficher le message dans un élément de la page. Cela est moins intrusif pour le visiteur de la page et cela permet en plus de personnaliser le message en CSS.

Pour faire tout cela, regardez ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var messages = []; messages.push("Il manque la désignation du système."); messages.push("Il manque la description de l'intervention réalisée."); if (0 < messages.length) { // s'il y a au moins un message dans la liste // construction du message complet var messageComplet = messages.join(" "); // affichage du message dans un élément de la page avec jQuery $("#affichageMessage").text(messageComplet); }

Salut merci pour ton aide.

Voilà où j'en suis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function controleCompteRendu(){
 
	// Variable msg : à chaque défauts de saisie du formulaire un message sera ajouté par msg.push
	var msg = ["Il manque :<br><br>"];
 
	// Si système est vide
	if(compteRendu.elements['systeme'].value == "" ){
		msg.push("<li>La désignation du système.</li>");
	}
	// Si intervention_realisee est vide
	if(compteRendu.elements['intervention_realisee'].value == "" ){
		msg.push("<li>La description de l'intervention réalisée.</li>");
	}
	// Si résultat est vide
	if(compteRendu.elements['resultat'].value == "" ){
		msg.push("<li>Le résultat de l'intervention.</li>");
	}
 
	// etc...
 
	// Si il y a plus d'un message dans msg
	if(msg.length > 1 ){
		// Faire apparaitre la div affichageMessage
		$('#affichageMessage').css('display','block');
 
		// Faire apparaitre balises <ol> de la div affichageMessage
		$('#baliseOL').css('display','block');
 
		// construction du message complet
		var messageComplet = msg.join(" ");
 
		// Affichage du message dans un élément de la page avec jQuery
		 document.getElementById("baliseOL" ).innerHTML = messageComplet;
 
		// Remonter en haut de page
		$("html, body").animate({scrollTop: 0},"slow");
 
		// Bloquer l'envoie du formulaire
		return false;
	}
	else{
		// Autoriser l'envoie du formulaire
		return true;
	}
}

Salut,

Tu peux faire quelque chose comme cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(function() {
        
$("#myform").find("input[type=submit]").on('click',function(event){     
                                                                                                                        
                event.stopPropagation(); // stop la propagation du click
                event.preventDefault(); // annule le comportement par défaut (ici = soumission du formulaire)
                
                var formulaire = $(this).parents('form:first'); // $(this).parents('form:first') représente le formulaire. J'utilise la syntaxe "parents('form:first')" pour que le code reste fonctionnel si l'input de type submit n'avait pas le formulaire comme parent direct, par exemple s'il était inclus dans un div.
 
                
                var content_erreurs = $("#erreurs"); // bloc html contenant les erreurs
                content_erreurs.html(''); // efface le contenu
                
                var erreurs = []; //initialise un tableau javascript
                
                function controleForm(form)
                {
                        var input1 = form.find("input[name=name_1]");
                        // $.trim est utilisé pour éviter qu'un champ rempli uniquement par des espaces vides soit considéré comme valide
                        if($.trim(input1.val()) == '')
                        {
                                // récupère le text du label et l'ajoute dans le tableau "erreurs"
                                erreurs.push(input1.parent('label').text());
                        }
                        
                        var input2 = form.find("input[name=name_2]");
                        if($.trim(input2.val()) == '')
                        {
                                erreurs.push(input2.parent('label').text());
                        }
                }
                
                // Appelle la fonction de contrôle
                controleForm(formulaire);
                
                if(erreurs.length > 0)
                {
                        // content_erreurs.data("erreur") récupère l'annonce des erreurs contenu dans l'attribut "data-erreur" du div ayant l'id="erreurs"
                        var message_erreur = '<p>'+content_erreurs.data("erreur")+'</p>';
                        
                        // Liste le tableau des erreurs
                        $.each(erreurs,function(i,v)
                        {
                                message_erreur += '<p>- '+v+'</p>';
                        })
                        
                        content_erreurs.html($(message_erreur)); // rempli le div conteneur des erreurs
                }
                else
                {
                        formulaire.submit();// soumet le formulaire
                }
        });
});
</script> 
</head>
<body>
 
<form id="myform" action="#" method="post">
    <label>champ name1<input type="text" name="name_1"></label><br>
    <label>champ name2<input type="text" name="name_2"></label><br>
    <input type="submit" value = "Soumettre">
</form>
 
<div id="erreurs" style="color:red" data-erreur='Les champs suivants doivent être renseignés:'></div>
 
</body>
</html>

A testé dans une page séparée.

L'avantage de ce type de code est que tout le texte nécessaire à l'affichage des messages se trouve dans le html, dans les balises label des input et dans l'attribut data-erreur du div affichant les erreurs. Côté javascript cela permet de se concentrer plus précisément sur la fonction "controleForm" que tu peux compléter en fonction des besoins.

Après si c'est pour contrôler uniquement que des champs sont remplis tu peux te servir aussi de l'attribut html required. C'est un contrôle assez sommaire puisqu'il permet de soumettre des champs composés uniquement d'espaces vides. Mais bon dans tous les cas si ces données sont indispensables il faut refaire un contrôle côté serveur.