Contrôle de formulaire

Version imprimable

Bonjour,
Voila j'aimerais ajouter une image à côté de chaque champs texte une petite image valide ou non valide, lorsqu'il y a erreur ou pas erreur.
Cependant je ne sais pas comment m'y prendre du tout.
J'ai essayer de modifier cette image en modifiant le CSS via le JS mais sans succès.

Voici mon JS :

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
 
				function surligne(champ, erreur)
				{
					if(erreur)
						champ.style.backgroundColor = "#fba";
					else
						champ.style.backgroundColor = "";
				}
 
				function verifNom(champ, champRetour)
				{
					var regexNom = /^[a-zA-ZÀ-ÿ-]{2,25}$/;
					if(!regexNom.test(champ.value))
					{
						surligne(champ, true);
					return false;
					}
					else
					{
						surligne(champ, false);
					return true;
					}
				}
 
				function verifPrenom(champ)
				{
					var regexPrenom = /^[a-zA-ZÀ-ÿ-]{2,25}$/;
					if(!regexPrenom.test(champ.value))
					{
						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 verifObjet(champ)
				{
					if(champ.value.length < 2 || champ.value.length > 50)
					{
						surligne(champ, true);
					return false;
					}
					else
					{
						surligne(champ, false);
					return true;
					}
				}
 
				function verifForm(f)
				{
					var nomOk = verifNom(f.nom);
					var prenomOk = verifPrenom(f.prenom);
					var mailOk = verifMail(f.email);
					var objetOk = verifObjet(f.objet);
 
					if(nomOk && prenomOk && objetOk && mailOk)
						return true
					else
					{
						alert("Veuillez remplir correctement tous les champs");
						return false;
					}
				}

et 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
27
28
29
30
31
 
				<form action="traitement.php" method="post" onsubmit="return verifForm(this)">
					<h3>N'hésitez pas à nous contacter directement via ce formulaire :</h3>
				  <table align="center" style="width:350px;">
					<tr>
					  <td class="texte" align="right">Votre Nom :</td>
					  <td><input type="text" id="nom" name="nom" tabindex="1" size="30" value="" onblur="verifNom(this)"/></td>	  
					</tr>
					<tr>
					  <td class="texte" align="right">Votre Prénom :</td>
					  <td><input type="text" name="prenom" tabindex="2" size="30"  value="" onblur="verifPrenom(this)"/></td>
					</tr>
					<tr>
					  <td class="texte" align="right">Votre Email :</td>
					  <td><input type="text" name="email" tabindex="3" size="30"  value="" onblur="verifMail(this)"/></td>
					</tr>
					<tr>
					  <td class="texte" align="right">Objet :</td>
					  <td><input type="text" name="objet" tabindex="4" size="30"  value="" onblur="verifObjet(this)"/></td>
					</tr>
					<tr>
					  <td class="texte" colspan="2" align="left">Votre Message :<br />
						<textarea cols="90" rows="10" name="message" tabindex="5" ></textarea></td>
					</tr>
				  </table>
 
      <p style="text-align: center;" >
 
		<input type="submit" name="envoi" value="Envoyer" title="Envoyer" tabindex="6" /> 
				<input type="reset" value="Annuler" title="Annuler" tabindex="7"/></p>
       </form>

Merci de bien vouloir me mettre sur la piste :lol:

Salut,

tu pourrais placer tes images directement dans ton code HTML comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
...
<tr>
    <td class="texte" align="right">Votre Nom :</td>
    <td>
        <input type="text" id="nom" name="nom" tabindex="1" size="30" value="" onblur="verifNom(this)"/>
        <img id="nomok" class="pasvisible" src="ok.jpg">
        <img id="nompasok" class="visible" src="pasok.jpg">
    </td>	
</tr>
...

dans ton css tu aurais :

Code:

1
2
3
4
5
6
7
8
9
10
 
.visible
{
display: block
}
 
.pasvisible
{
display: none
}

et dans ton code JS :

Code:

1
2
3
4
5
6
7
8
 
//champ texte ok :
document.getElementById("nomok").className = "visible";
document.getElementById("nompasok").className = "pasvisible";
 
//champ texte pas ok :
document.getElementById("nomok").className = "pasvisible";
document.getElementById("nompasok").className = "visible";

Alors enfaite j'ai essayé ta technique mais sa ne fonctionne pas. Donc j'ai essayé de m'en inspirer.
Dans mon JS j'ai :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	function surligne(champ, erreur)
				{
					if(erreur)
						{
						champ.style.backgroundColor = "#fba";
						document.getElementById("nom").className = "valide_non";
						document.getElementById("prenon").className = "valide_non";
						document.getElementById("email").className = "valide_non";
						document.getElementById("objet").className = "valide_non";
						}
					else
						{
						champ.style.backgroundColor = "";
						document.getElementById("nom").className = "valide";
						document.getElementById("prenom").className = "valide";
						document.getElementById("email").className = "valide";
						document.getElementById("objet").className = "valide";
						}
				}

et dans mon CSS :

Code:

1
2
3
4
5
6
7
8
9
.valide
{
	background:url("../images/valide.png") bottom right no-repeat;
}
 
.valide_non
{
	background:url("../images/valide_non.png") bottom right no-repeat;
}

Donc pour le nom sa fonctionne correctement ! Par contre dès que j'ajoute le prénom, l'email et l'objet sa ne fonctionne plus...

25/04/2010, 17h35
yakiniku

Je crois que t'as fait une erreur ici :

Citation:

function surligne(champ, erreur)
{
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("nom").className = "valide_non";
document.getElementById("prenon").className = "valide_non";
...
25/04/2010, 17h42
sasuke001

Merci sa fonctionne bien maintenant. :)
Encore merci !!