vérification de formulaire

**onesat** · 22/08/2011, 19h59

Bonjour tout le monde j'ai réalisé un formulaire d’inscription pour mon site et sa fonctionne bien seulement j’ai voulu ajouté une modification ce qui ne marche pas !
Comme vous l’avez sans doute remarqué le formulaire est fait de sorte que si un champ est mal renseigné ou vide la fonction surligne colore le champ et si la personne insiste pour valider le formulaire une boîte de dialogue alerte apparaît pour indiquer les erreurs.
Et moi je veux qu’en plus de la coloration du champ qu’un message d’erreur s’affiche juste devant le champ mal renseigné par exemple ‘Ce Pseudo est trop cours veuillez choisir 3 caractères au minimum’. Help me ! Et merci d’avance
Voici le code JavaScript :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script language="JavaScript">
<!--
function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#fba";
   else
      champ.style.backgroundColor = "";
}
 
function verifPseudo(champ)
{
   if(champ.value.length < 3 || champ.value.length > 20)
   {
      surligne(champ, true);
 
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
 
   }
}
 
function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
 
function verifMotdep(champ)
{
   if(champ.value.length < 6 || champ.value.length > 40)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
 
function verifForm(f)
{
   var pseudoOk = verifPseudo(f.pseudo);
   var mailOk = verifMail(f.email);
   var ageOk = verifMotdep(f.mot_de_passe);
 
   if(pseudoOk && mailOk && mot_de_passe)
      return true;
   else
   {
      alert("Veuillez remplir correctement tous les champs Pseudo: 3 caractères au minimum et 20 caractères au max email: XXX@XXX.XXX");
      return false;
   }
}
//-->
</script>

Et voici le code de mon formulaire :

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
<form method='POST' action='verifformulaire.php' onsubmit="verifForm(this)">
		<table border="0">
				<tr>
                	<td>Pseudo<sup>*</sup></td>
					<td><input type="text" name="pseudo" value="" size="30" maxlength="30" onblur="verifPseudo(this)"/></td>
                </tr>
                <tr>
					<td>e-mail<sup>*</sup></td>
    				<td><input type="text" name="email" value="" size='30' maxlength="30" onblur="verifMail(this)"/></td>
				<tr>
					<td>Mot de passe<sup>*</sup></td>
    				<td><input type="password" name="mot_de_passe" value="" size="30" maxlength="30" onblur="verifMotdep(this)"/></td>
                </tr>
    			<tr>	
                    <td>Retapez votre mot de passe<sup>*</sup></td>
					<td><input type="password" name="mot_de_passe1" value=""  size="30" maxlength="30"/></td>
    			</tr>
       </table>
        <p style="font-size:14px" style="color:#C30"> Veuillez à indiquer une adresse e-mail valide. Elle sera utilisée pour valider votre compte.</p>
  <p style="font-size:14px" style="color:#C30"> Votre adresse e-mail ne sera pas diffusée, elle est utilisée uniquement sur ce site.</p>
<br /><br />
			<center><input type='submit' name="post" value="s'inscrire au Site du Génie" /></center>
	</form>

**RomainVALERI** · 22/08/2011, 22h28

Ou est le souci exactement ?

- créer un span ?

Code :

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

1
2
3
var ajout = document.createElement("SPAN");
ajout.appendChild(document.createTextNode(message));
document.getElementById("idDuConteneur").appendChild(ajout);

- savoir ou le placer ? (a priori il doit être facile de localiser l'élément parent en fonction de l'id du champ en erreur)
- autre ?

**onesat** · 24/08/2011, 19h35

Ce que je veux si l'utilisateur saisie deux caractères comme Pseudo exemple Jo le champ Pseudo sera coloré pour signaler qu'il doit saisir au minimum trois caractères d'après mon code maintenant je veux qu'en plus de ça qu'un message s'affiche devant le champ Pseudo Exemple: "Saisissez au minimum 3 caractères"

**RomainVALERI** · 24/08/2011, 20h27

Envoyé par onesat

Ce que je veux si l'utilisateur saisie deux caractères comme Pseudo exemple Jo le champ Pseudo sera coloré pour signaler qu'il doit saisir au minimum trois caractères d'après mon code maintenant je veux qu'en plus de ça qu'un message s'affiche devant le champ Pseudo Exemple: "Saisissez au minimum 3 caractères"

Quelle information viens-tu de rajouter ?

Tout ça était déjà dans ton post initial...

Tu n'as toujours pas dit ce qui t'empêchait d'écrire cette fonctionnalité très simple. Aucun déshonneur quand on débute, je te rassure, mais pour t'aider, il faut que nous sachions où est-ce que ça coince...

Tu as vraisemblablement déjà écrit des controles de champ, il y en a plusieurs dans ton extrait, donc ce n'est pas plus difficile, seulement juste avant de faire un alert avec ton message (ou à la place, comme tu veux), tu crées un span comme je t'ai montré pour ajouter ton message

Pour le positionnement ce n'est pas toujours évident mais je préférerais savoir si tu es déjà ok avec la partie "création de la mention écrite" ^^ une fois que ça sera bon on pourra s'occuper du style et du positionnement.

(à moins que tu ne souhaites un code tout fait prêt à l'emploi bien sur

il se trouve ici)

**onesat** · 25/08/2011, 16h33

voilà j'ai utilisé la balise span dans mon formulaire et j'ai obtenu ceci

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
<form method='POST' action='verifformulaire.php' onsubmit="verifForm(this)">
                	<label class="champs" for="pseudo" >Pseudo<sup>*</sup></label>
					<input type="text" name="pseudo" value="" size="30" maxlength="30" onblur="verifPseudo(this)"/>
						<span class="messages">Saisissez au minimum 3 caracteres 20 au maxi</span><br /><br />
 
					<label class="champs" for="email">e-mail<sup>*</sup></label>
    				<input type="text" name="email" value="" size='30' maxlength="30" onblur="verifMail(this)"/>
				        <span class="messages">exemple: XXX@XXX.XXX</span><br /><br />
 
					<label class="champs" for="mot_de_passe">Mot de passe<sup>*</sup></label>
    				<input type="password" name="mot_de_passe" value="" size="30" maxlength="30" onblur="verifMotdep(this)"/>
                        <span class="messages">6 caracteres au minimum 20 au maxi</span><br /><br />
 
                    <label class="champs" for="mot_de_passe">Retapez votre mot de passe<sup>*</sup></label>
					<input type="password" name="mot_de_passe1" value=""  size="30" maxlength="30"/>
    			        <span class="messages">Les deux mot de passe doivent etre identique</span>
 
        <p style="font-size:14px" style="color:#C30"> Veuillez à indiquer une adresse e-mail valide. Elle sera utilisée pour valider votre compte.</p>
  <p style="font-size:14px" style="color:#C30"> Votre adresse e-mail ne sera pas diffusée, elle est utilisée uniquement sur ce site.</p>
<br /><br />
			<center><input type='submit' name="post" value="s'inscrire au Site du Génie" /></center>
	</form>

Seulement je ne sais pas comment utilisé ton bout de code???????? Help me!

**RomainVALERI** · 25/08/2011, 18h59

Attends... tu veux que les messages soient présents tout le temps ? ou bien qu'ils apparaissent quand la vérification les rend nécessaires ?

(par exemple : quand le pseudo est trop court : hop le span s'affiche)

Parce que ça change quand même un peu la manière de procéder en fonction du résultat voulu

Je proposais un affichage dynamique en créant le span uniquement dans la fonction javascript de validation, là tu as mis directement les spans dans ta page, "en dur". (mais ça peut aussi être une manière de procéder, que tous les spans soient déjà présents, mais à condition de leur appliquer un style CSS pour les cacher dès l'ouverture de la page, puis de ne les faire apparaitre au cas par cas qu'en fonction des fonctions de validation...

En gros il y a plusieurs possibilités comme tu vois ^^

Et sinon au fait à propos de ça

Envoyé par onesat

Seulement je ne sais pas comment utilisé ton bout de code???????? Help me!

Laisse tomber, c'était une plaisanterie stupide...

(tu as regardé l'URL du lien ?

>>> http://petitpapanoeldesdeveloppeurs....caracteres.php

)(bon ok c'est nul

)