Afficher un texte à coté d'un champ

**cinou01** · 22/11/2009, 11h56

Bonjour à tous,

J'ai un formulaire pour lequel j'utilise un premier contrôle en javascript avant de vérifier les valeurs coté serveur.

J'aimerai afficher les erreurs à coté des champs adéquates.

J'ai pensé à mettre les erreurs dans un tableau, mais aprés je vois pas comment afficher les erreurs a coté du champ concerné.

**SpaceFrog** · 22/11/2009, 12h44

pour le positionnement regade plutot du coté de css et float ...

**sebhm** · 22/11/2009, 12h51

Bonjour,

tu pourrais par exemple avoir un DIV vide apres (ou à côté de) chaque champ de ton formulaire, dans lequel tu ecrirais un message via javascript si nécessaire.
Le DIV se gere au depart avec CSS.
L'affichage de l'erreur en javascript.

regarde de ce coté.
C'est un peu compliqué car utilisation de Jquery, mais c'est pour l'idée

**cinou01** · 22/11/2009, 13h55

J'ai essayé la solution du DIV en créant un paragraphe vide , placé juste à coté du champ concerné.
Ensuite dans le javascript, je change le contenu du paragraphe ainsi :

Code :

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

1
2
 
document.getElementById("divNom").innerHTML="Veuillez utiliser que des lettres dans votre nom (Minimum 2 caracteres)";

Le problème c'est que le texte s'affiche juste au moment du clique et disparait après.

**sebhm** · 22/11/2009, 15h08

Ta premiere solution :

Code :

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

document.getElementById("divNom").firstChild.textContent="Veuillez  ...";

était tout aussi interessante ...
n'édite pas ton post pour proposer une nouvelle solution.

de plus, textContent est DOM (mais y'a un bemol de Taille : IE et Opera ne semblent pas l'implémenter), innerHTML ne l'est pas (bien que ca marche sur tous les navigateurs) :
innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers.

chez moi, ces solutions fonctionnent.
Je pense que le fait que le texte disparaisse ne vient pas de ce bout de code.
Montre nous le reste stp.

Voila un petit test que j'ai fait et qui fonctionne :

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
<html>
	<head><title>titre</title>
		<style type="text/css">
			<!--
			-->
		</style>
		<script type="text/javascript">
			<!--
			function verif() {
				document.getElementById("divNom").firstChild.nodeValue="bla bla bla";
				return false;
			}
			-->
		</script>
	</head>
	<body >
		<form action="test.php" onsubmit="return verif();">
			<input type="text" name="inputtest" id="inputtest" value="" />
			<div id="divNom">&nbsp;</div>
 
			<input type="submit" name="submit" id="submit" />
		</form>
	</body>
</html>

3eme possibilité : nodeValue
Ne fonctionne que si getElementById("divNom").firstChild existe, donc il faut initialiser le contenu du DIV avec un espace insécable par exemple

**cinou01** · 22/11/2009, 15h23

C'est bizzare, j'ai fait à peu prés la meme chose que toi.
je te met mon code html,javascript et CSS :

html :

Code :

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

<label for="nom">Nom</label><input id="nom" type="text" name="nom" /><div id="divNom">Nom</div><br/>

JavaScript:
La partie conecernée

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var formulaire = document.getElementById("formulaire");
 
	//Nom
	var regNom=new RegExp("^[a-zA-Z]{2,12}$","g");
	var nom=document.getElementById("nom").value;
	//document.getElementById('nom').innerHTML='un test';
	if (!regNom.test(nom))
	{
			document.getElementById('divNom').firstChild.nodeValue = 'Veuillez utiliser que des lettres dans votre nom (Minimum 2 caracteres)';
 
 
	}

CSS :

Code :

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

1
2
3
4
5
6
7
8
 
div#divNom
{
	position:absolute;
	left:630px;
	top:19px;
	color:red;
}

La valeur du nodeValue est à null dans fireburg ... pourtant y a bien quelque chose dedans "Nom"

**sebhm** · 22/11/2009, 16h10

ton code fonctionne chez moi.

Le probleme doit être autre part dans ton code.
Essaie d'enlever des trucs petit à petit et teste.

sinon, poste ton code en entier (si ca fait pas 1500 lignes!)

**Bovino** · 22/11/2009, 16h20

Envoyé par cinou01

La valeur du nodeValue est à null dans fireburg ... pourtant y a bien quelque chose dedans "Nom"

Le firstChild de ton div est-il bien un noeud texte ?
Voir la FAQ

**cinou01** · 22/11/2009, 16h34

Oui mon firstChlid est bien un noeud de texte(textNode).

**cinou01** · 22/11/2009, 16h56

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
72
73
74
75
76
77
78
79
80
81
82
83
84
 
function verif() 
{ 
	var formulaire = document.getElementById("formulaire");
 
	//Nom
	var regNom=new RegExp("^[a-zA-Z]{2,12}$","g");
	var nom=document.getElementById("nom").value;
	//document.getElementById('nom').innerHTML='un test';
	if (!regNom.test(nom))
	{
			document.getElementById('divNom').firstChild.nodeValue = 'Veuillez utiliser que des lettres dans votre nom (Minimum 2 caracteres)';
 
 
	}
 
	//Prenom
	var regPrenom=new RegExp("^[a-zA-Z]{2,12}$","g");
	var prenom=document.getElementById("prenom").value;
	if (!regPrenom.test(prenom))
	{
			//alert ('Veuillez utiliser que des lettres dans votre prenom (Minimum 2 caracteres)');
	}
 
	//Année de naissance
	if (formulaire.naissance.selectedIndex == "0") //L'index "0" correspond à la phrase : Veuillez saisir une année
	{
			//alert ('L\'annee de naissance doit etre comprise entre 1901 et 2009');
	}
 
	//Mail
	var mail=document.getElementById("mail").value;
	var regMail = /^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/	
	if(!regMail.exec(mail))
	{
		//alert('Adresse mail incorrecte ou vide');
	}
 
	//Login
	var regLogin=new RegExp("^[a-zA-Z0-9]{4,12}$","g");
	var login=document.getElementById("login").value;
	if (!regLogin.test(login))
	{
		//alert ('Login invalide ou vide (Entre 4 et 12 caracteres, que des lettres et chiffres)');
	}
 
	//Mot de passe
	var regPass=new RegExp("^[a-zA-Z0-9]{4,12}$","g");
	var regPassBis=new RegExp("^[a-zA-Z0-9]{4,12}$","g");
	var pass=document.getElementById("mdp").value;
	var passBis=document.getElementById("mdpbis").value;
	if(pass == passBis)
	{
		if (!regPass.test(pass))
		{
			//alert ('Mot de passe invalide ou vide (Entre 4 et 12 caracteres, que des lettres et chiffres)');
		}
		if (!regPassBis.test(passBis))
		{
			//alert ('Mot de passe invalide ou vide (Entre 4 et 12 caracteres, que des lettres et chiffres)');
		}
	}
	else
	{
		//alert ('Les deux mot de passe sont differents');
	}
 
	//Centre d'intêret
	alert(document.formulaire.mar.checked);
	if((formulaire.ci.checked == false) && (formulaire.lec.checked == false)	&& (document.formulaire.sp.checked == false))
	{
		//alert ('Veuillez précisez votre situation familiale');
	}
 
	//Situation familiale
	alert(document.formulaire.mar.checked);
	if((formulaire.mar.checked == false) && (formulaire.cel.checked == false)	&& (document.formulaire.veuf.checked == false))
	{
		//alert ('Veuillez précisez votre situation familiale');
	}
 
 
}			
window.addEventListener('load',manipDom,'false');

[/QUOTE]

**sebhm** · 22/11/2009, 17h33

le texte ecrit lors de la verif du formulaire disparait car la page est soumise, et donc rechargée car l'attribut "action" est vide.
Il faut que tu fasses un

Code :

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

return false;

si il y a une erreur de saisie vue par javascript afin d'empecher la soumission du formulaire.

je rajoute que tu as une erreur javascript

Code :

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

document.formulaire

n'existe pas, c'est

Code :

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

formulaire

tout court car tu l'assignes au depart

Code :

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

var formulaire = document.getElementById("formulaire");

cette erreur stoppe la fonction Verif()

**cinou01** · 22/11/2009, 17h46

je dois ajouter
return false;

dans la fonction verif()?
je supprime l'attribut action dans mon formulaire?

**cinou01** · 22/11/2009, 17h58

Je l'ai mi dans l'attribut action avec onsubmit=" return false"

Merci pour l'aide

**sebhm** · 22/11/2009, 18h11

tu ne dois pas supprimer l'attribut action, c'est lui qui dit quelle page est appelée lors de la validation du formulaire.

Et tu ne dois faire un

Code :

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

return false;

que si il y a un probleme détecté par la verif javascript.
Si tout est OK, ca suit son cours ...

Afficher un texte à coté d'un champ

JavaScript

Discussions similaires

Partager

Partager