Contrôle de formulaire

**sasuke001** · 24/04/2010, 23h42

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 :

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
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 :

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
 
				<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

**yakiniku** · 25/04/2010, 00h03

Salut,

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

Code :

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

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 :

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

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

et dans ton code JS :

Code :

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

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";

**sasuke001** · 25/04/2010, 17h29

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 :

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
	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 :

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

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...

**yakiniku** · 25/04/2010, 17h35

Je crois que t'as fait une erreur ici :

function surligne(champ, erreur)
{
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("nom").className = "valide_non";
document.getElementById("prenon").className = "valide_non";
...

**sasuke001** · 25/04/2010, 17h42

Merci sa fonctionne bien maintenant.

Encore merci !!

Contrôle de formulaire

JavaScript

Discussions similaires

Partager

Partager