Afficher un texte à coté d'un champ

Version imprimable

22/11/2009, 11h56
cinou01

Afficher un texte à coté d'un champ

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é.
22/11/2009, 12h44
SpaceFrog

pour le positionnement regade plutot du coté de css et float ...
22/11/2009, 12h51
sebhm

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
22/11/2009, 13h55
cinou01
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:

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.

Ta premiere solution :

Code:

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:

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">  </script> </head> <body > <form action="test.php" onsubmit="return verif();"> <input type="text" name="inputtest" id="inputtest" value="" /> <div id="divNom"> </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

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:

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

JavaScript:
La partie conecernée
Code:

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:

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"

22/11/2009, 16h10
sebhm

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!)
22/11/2009, 16h20
Bovino

Citation:

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
22/11/2009, 16h34
cinou01

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

JavaScript :

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

22/11/2009, 17h33
sebhm

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:

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:

document.formulaire

n'existe pas, c'est

Code:

formulaire

tout court car tu l'assignes au depart

Code:

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

cette erreur stoppe la fonction Verif()
22/11/2009, 17h46
cinou01

je dois ajouter
return false;

dans la fonction verif()?
je supprime l'attribut action dans mon formulaire?
22/11/2009, 17h58
cinou01

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

Merci pour l'aide :)
22/11/2009, 18h11
sebhm

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:

return false;

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