valider un formulaire avec javascript

Version imprimable

Bonjour a tous,

je me lance doucement dans le javascript, j'ai trouvé sur le net une bibliotheque nommée jQuery qui permet de faire des validations de formulaire etc...
je me sers deja de jQuery afin d'afficher ou cacher mon formulaire comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
    // Masquage  du formulaire
    $("form").hide();
    // CSS : curseur pointeur
    $("#lien_form").css("cursor", "pointer");
    $("#lien_form").click(function() 
    {
        // Actions uniquement si la réponse n'est pas déjà visible
        if($("form").is(":visible") == false) {
            // Affichage du formulaire
            $("form").slideDown();
        }
        else
        {
            $("form").slideUp();
        }
    });
});

et voici la partie HTML:

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
 
<a  id="lien_form">[Accéder au formulaire]</a>
            <form  method="POST" action="?page=13">
                <table style="margin:auto;padding-top:2px;">
                        <tr>
                            <td style="padding-top:2px;">Nom</td>
                            <td style="padding-top:2px;"><input type="text" name="nom" id="nom"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Prénom</td>
                            <td style="padding-top:2px;"><input type="text" name="prenom"  id="prenom"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Date de naissance<br> (jj/mm/aaaa)</td>
                            <td style="padding-top:2px;"><input type="text" name="date de naissance" id="date" /></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Adresse complète</td>
                            <td style="padding-top:2px;"><textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Code postal</td>
                            <td style="padding-top:2px;"><input type="text" name="code_postal" id="code_postal"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Ville</td>
                            <td style="padding-top:2px;"><input type="text" name="ville" id="ville"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">Tel</td>
                            <td style="padding-top:2px;"><input type="text" name="tel" id="tel"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td style="padding-top:2px;">E-mail</td>
                            <td style="padding-top:2px;"><input type="text" name="email" id="email"/></td>
                            <td class="erreur"></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right;padding-top:10px;"><input type="submit"  id="envoyer" value="Envoyer"/></td>
                        </tr>
                </table>
            </form>

donc l'affichage ou non du formulaire marche parfaitement; j'ai donc voulu passer a l'étae suivante qui est la controle du formulaire: avec ceci:

Code:

1
2
3
4
5
6
7
8
9
 
//VERIFICATION FORMULAIRE
    $("#envoyer").click(function(){
        if($("#nom").val() == ""){
            $("#nom").next(".erreur").fadeIn().text("Veuillez entrer votre nom");
        }
        else{
            $("#nom").next(".erreur").fadeOut();
        }

la partie CSS est comme ceci:

Code:

1
2
3
4
5
6
7
 
.erreur{
background: url(images/wrong.png)  center no-repeat;
padding: 0 0 0 30px;
color: red;
display: none;
}

alors la je rencontre deux bugs:
1/ rien ne s'affiche dans mon bloc erreur aucun message rien
2/ le formulaire disparait lorsque j'appui sur le bouton valider(comme voulu mais juste au chargement de la page!)

Quelqu'un d'avisé pourrait il m'aider svp?
merci

29/06/2009, 18h44
bigben89
Déjà, à ta place, je ferais le text() avant le fadeIn(), sinon tu fais un effet sur du texte vide, puis tu affiches le texte.

1/ Le next() te retourne l'élément suivant celui en cours.
Le <td class="erreur"> est situé après le td contenant l'input, et non pas après l'input lui-même.
Il faut donc d'abord que tu te positionnes sur le td (avec parent()), puis seulement, tu fais le next() :

Code:

$("#nom").parent().next(".erreur").text("Veuillez entrer votre nom").fadeIn()

2/ Je réponds peut-être à côté, mais pourquoi faire la validation du formulaire au moment du click sur le bouton ( $('#envoyer').click(...) ) ?
Si on se met sur un champ et qu'on appuie sur Entrée, le formulaire sautera ta validation. Il vaudrait mieux faire la validation lors du submit du formulaire :
Code:

1 2 3 4 5 6 7 8 $('#IdFormulaire').submit(function(){ // ... traitement des erreurs if( /* formulaire est valide */ ){ return true; }else{ return false; } })

salut et merci,

je viens d'essayer ton code avec parent() mais le résultat est strictement le meme: rien ne s'affiche.dans mon css je mets display: none;
afin de cacher les images d'erreurs ("wrong.png") et de les afficher seulement si les champs sont vides ou autres....

sinon pour la deuxième partie de mon problème , je vais essayer d'etre plus clair!
j'utilise jQuery afin de cacher le formulaire au chargment de la page!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready(function() { // Masquage du formulaire $("form").hide(); // CSS : curseur pointeur $("#lien_form").css("cursor", "pointer"); $("#lien_form").click(function() { // Actions uniquement si la réponse n'est pas déjà visible if($("form").is(":visible") == false) { // Affichage du formulaire $("form").slideDown(); } else { $("form").slideUp(); } });
ce code la permet de cacher et afficher le form sur click de lien!
ça marche niquel!

par contre lors de la validation du formulaire, ce bout de code semble être a nouveau exécuté alors que je ne le veux pas!
et du coup le formulaire est de nouveau caché! Hors je voudrais qu'il ne soit caché qu'au chargement de la page, et non pas lors de l'appui sur le bouton "envoyer" ou "valider".

29/06/2009, 19h59
x2thez

Bonsoir,

en fait il correspond a ceci:
<input type="submit" id="envoyer" value="Envoyer"/>
mon bouton d'envoi.
29/06/2009, 20h03
danielhagnoul

Bonsoir.

Toutes mes excuses, c'était bien caché.

J'ai supprimé mon message aussitôt après l'avoir vu, mais déjà trop tard.
29/06/2009, 20h04
x2thez

pas de pb!

en fait je me demande si ce que je veux faire marche dans un tableau?
car j'ai vu un exemple qui fonctionne avec juste des div et span...
29/06/2009, 20h09
x2thez

ok c'est bien ça le probleme! les fadeIn etc de jQuery ne fonctionne pas dans les tableaux!
existe il une autre fonctionde jQuery?
ou suis-je obligé de virer mon tableau?
(qui me seravit a mettre en ordre mon formulaire)

non personne ne sait?
sinon une astuce pour bien mettre en ordre mon 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
<form  method="POST" >
			Nom : 
			<input type="text" name="nom" id="nom"/><span class="erreur-form"> </span>
			<br />
			Prénom :
			<input type="text" name="prenom"  id="prenom"/><span class="erreur-form"> </span>
			<br />
			Date de naissance :
			<input type="text" name="date de naissance" id="date" /><span class="erreur-form"> </span>
			<br />
			Adresse : 
			<textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea><span class="erreur-form"> </span>
			<br />
			Code postal :
			<input type="text" name="code_postal" id="code_postal"/><span class="erreur-form"> </span>
			<br />
			Ville :
			<input type="text" name="ville" id="ville"/><span class="erreur-form"> </span>
			<br />
			Tel :
			<input type="text" name="tel" id="tel"/><span class="erreur-form"> </span>
			<br />
			E-mail :
			<input type="text" name="email" id="email"/><span class="erreur-form"> </span>
			<br /><br />
			<input type="submit" value="envoyer" id="envoyer" />

car la c'est pas tres carré!

Bonsoir.

Après avoir repris les codes sur mon ordinateur pour m'y retrouver, plus de problèmes.

bigben89 avait donné la solution !
Il restait à assembler ses recommandations :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
		.clickable {
			display:block;
			width:50px;
			height:50px;
			margin:6px;
			padding:4px;
			border:1px solid red;
			cursor:pointer;
		}
 
		.erreur{
			/*background: url(images/wrong.png)  center no-repeat;*/
			background-color:#FFFFCC;
			padding: 0 0 0 30px;
			color: red;
			display: none;
		}
 
		#lien_form {
			cursor:pointer;
		}
 
		#IdFormulaire {
			display:none;
		}
 
	</style>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$("#lien_form").click(function(){
				if($("#IdFormulaire").is(":visible") == false) {
					$("#IdFormulaire").slideDown();
				} else {
					$("#IdFormulaire").slideUp();
				}
			});
 
			$("#IdFormulaire").submit(function(){
				var boolOk = false;
 
				if ($("#nom").val() == ""){
					$("#nom").parent().next(".erreur").text("Veuillez entrer votre nom").fadeIn();
				} else {
					$("#nom").parent().next(".erreur").fadeOut();
				}
 
				//tester toutes les sources d'erreurs
 
				//si ok, mettre boolOk=true;
 
				if ( boolOk ){	//le formulaire ne sera pas envoyé tant que boolOk=false;
					return true;
				} else {
					return false;
				}
			});	
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<a  id="lien_form">[Accéder au formulaire]</a>
		<form id="IdFormulaire"  method="POST" action="?page=13">
			<table style="margin:auto;padding-top:2px;">
					<tr>
						<td style="padding-top:2px;">Nom</td>
						<td style="padding-top:2px;"><input type="text" name="nom" id="nom"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Prénom</td>
						<td style="padding-top:2px;"><input type="text" name="prenom"  id="prenom"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Date de naissance<br> (jj/mm/aaaa)</td>
						<td style="padding-top:2px;"><input type="text" name="date de naissance" id="date" /></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Adresse complète</td>
						<td style="padding-top:2px;"><textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Code postal</td>
						<td style="padding-top:2px;"><input type="text" name="code_postal" id="code_postal"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Ville</td>
						<td style="padding-top:2px;"><input type="text" name="ville" id="ville"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">Tel</td>
						<td style="padding-top:2px;"><input type="text" name="tel" id="tel"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td style="padding-top:2px;">E-mail</td>
						<td style="padding-top:2px;"><input type="text" name="email" id="email"/></td>
						<td class="erreur"></td>
					</tr>
					<tr>
						<td colspan="2" style="text-align:right;padding-top:10px;"><input type="submit"  id="envoyer" value="Envoyer"/></td>
					</tr>
			</table>
		</form>
		<div id="affiche"></div>
	</div>
</body>
</html>

29/06/2009, 20h51
x2thez

c'est vraiment bizarre, car j'ai essayer ca methode et ca ne marchait pas!
et en changeant un peu mon code ca passe mais pas dans un tableau ...
bon merci
je vais adapter ceci chez moi.
si pb je reviens!
merci a vous tous.