Vérification formulaire et affichage erreurs

**almoha** · 01/11/2012, 18h08

Bonjour,

Je vérifie les champs d'un formulaire. Si au moins l'un d'entre eux est vide, j'affiche une fenêtre UI DIALOG indiquant que le formulaire est incomplet. C'est fonctionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<head>
<script type="text/javascript">
$(function(){
 
   $('.etape_2').click(function(){
 
   valid = true;
 
	//VERIF CHAMP TITRE
        if($("#titre_insert").val()==""){
 
	$("#titre_insert").next(".erreur").show().text("Entrer un titre");
 
	valid = false; 
 
        }
 
	else
	{
	$("#titre_insert").next(".erreur").hide();
 
	}
 
	//VERIF CHAMP AUTEUR
        if($("#auteur_insert").val()==""){
 
	$("#auteur_insert").next(".erreur").show().text("Entrer un auteur");
 
	valid = false; 
 
        }
 
	else
	{
	$("#auteur_insert").next(".erreur").hide();
 
	}
 
   if (valid == false) {
 
        $( "#dialog_si_erreur" ).dialog({
 
	});
 
   }
 
});
</script>
</head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<input type="text" id="titre_insert" name="titre_insert" size="50"/> 
<span class="erreur"style="display:none; color:#F00;"></span>
 
<input type="text" id="auteur_insert" name="auteur_insert" size="50"/> 
<span class="erreur"style="display:none; color:#F00;"></span>
 
<div style="display: none;" id="dialog_si_erreur" title="Erreur !">//fenêtre DIALOG
    <p>Le formulaire est incomplet !</p>
</div>
 
<input type="button"  class="etape_2" value="Etape suivante &gt;&gt;" />

Dans ma fenêtre DIALOG, je souhaiterais afficher la liste des erreurs rencontrées. Pour arriver à mes fins, j'ai pensé à plusieurs choses :

- tester si l'erreur existe grâce à un " if ( $('.erreur').is(':visible')){..."
- utiliser la fonction each () pour boucler sur les class "erreur" (?)
- utiliser la fonction html() pour ajouter la liste des erreurs dans la DIV id="dialog_si_erreur";

Qu'en pensez-vous ? Pouvez-m'aider ? Merci.

**danielhagnoul** · 01/11/2012, 18h43

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var str = "Liste des erreurs : ";
 
$( "span.erreur:visible" ).each( function( i, item ){
    if ( i > 0 ) str += ", ";
 
    str += $( item ).prev()[0].id;
});
 
$( "#dialog_si_erreur" ).append( "<p>" + str + "</p>" );

**almoha** · 01/11/2012, 22h03

Merci beaucoup, ce code correspond à ce que je voulais obtenir

Vérification formulaire et affichage erreurs

jQuery

Vue hybride

Discussions similaires

Partager

Partager