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>