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"

Afficher un texte à coté d'un champ

JavaScript

Vue hybride

Discussions similaires

Partager

Partager