Modifier/Creer une div dans un formulaire (parmis d'autres formulaire identiques.)

Version imprimable

13/11/2007, 12h11
bendede

Modifier/Creer une div dans un formulaire (parmis d'autres formulaire identiques.)

Bonjour,

Actuellement, je sais reconnaitre si les champs du formulaire qui me concerne est rempli ou non et afficher cela dans une fenetre d'alerte JavaScript, mais ça ne me plait pas et je souhaiterai, pour marquer qu'il manque des champs remplis à mon formulaire, afficher "Requis" a coté du champs concerné.

Dans le cas simple, d'un seul formulaire sur une page, je sais le faire en me referant à un id unique d'une division vide, (que je remplissai ou non avec un innerHTML) mais dans mon cas present, c'est un page avec plusieurs formulaire identique et je n'arrive ni a remplir une division existante, ni a ajouter une division (createElement, appendChild...)

La structure de ma page:

Sujet1
Message1
Message2
Formulaire Nouveau Message
Sujet2
Message1
Formulaire Nouveau Message
...
Formulaire Nouveau Sujet

Mon formulaire:

Citation:

<form action="index.php?a=enregMessage"
method="post"
class="formForum"
onSubmit="return verificationFormMessage(this);">

<fieldset>
<legend>Nouveau message</legend>
<label for="pseudo">Pseudo :</label>
<input type="text" name="pseudo" id="pseudo" value="{$pseudo}" /><br />
<label for="message">Message :</label>
<textarea name="message" id="message">{$message}</textarea><br />
<input type="hidden" name="idMessage" value="{$idMessage}" />
<input type="hidden" name="idSujet" value="{$idSujet}" />

<label> </label><input type="submit" value="Poster" />
</fieldset>
</form>

Mon Script JS:

Citation:

<script type="text/javascript">
function verificationFormMessage(formMess) {
if ((formMess.elements['pseudo'].value == "")||(formMess.elements['message'].value == "")) {
if (formMess.elements['pseudo'].value == ""){
alert("Il faut rentrer un pseudo");
}
if (formMess.elements['message'].value == "") {
alert("Il faut rentrer un message");
}
return false;
} else { return true; }
}

A partir du "this" recupere de mon formulaire, je ne peux acceder qu'aux entites input et textarea, je ne peux pas acceder à de division.. et si j'essai d'ajouter un division, je ne sais pas m'y prendre, et au mieux, ça donne ça:

Citation:

<input type="text" name="pseudo" id="pseudo" value="{$pseudo}"
<div>Requis</div>
/>

Tandis qu'il me faudrai, bien evidement ça:

Citation:

<input type="text" name="pseudo" id="pseudo" value="{$pseudo}" />
<div>Requis</div>

Quelqu'un saurai m'aider s'il vous plait? Merci

voici un exemple basé sur ton code et commenté ;)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function verificationFormMessage(formMess) {
	try{
	if ((formMess.elements['pseudo'].value == "")) {
		if (formMess.elements['pseudo'].value == ""){
			var elementEnCours = formMess.elements['pseudo'];
			 // crée un nouveau nœud d'élément vide
			 var sp1 = document.createElement("span");
			 // Affectation du texte désiré
			 var sp1_content = document.createTextNode("Il faut rentrer un pseudo");
			 // ajoute ce contenu au nouvel élément
			 sp1.appendChild(sp1_content);
			 var parentDiv = elementEnCours.parentNode;
			 // insère le nouvel élément juste après l'élément vérifié ( textbox, textarea ... )
			 parentDiv.insertBefore(sp1, elementEnCours.nextSibling);
			 alert("Il faut rentrer un pseudo");
		}
		if (formMess.elements['message'].value == "") {
			alert("Il faut rentrer un message");
		}
		return false;
	}
	else { return false; }
	}
	catch(err){
		alert(err);
		return false;
	}	
 
}
</script>
</head>
<BODY>
<form action="index.php?a=enregMessage" 
	  method="post"
	  class="formForum"
	  onSubmit="return verificationFormMessage(this);">
 
<fieldset>
<legend>Nouveau message</legend>
<label for="pseudo">Pseudo :</label>
<input type="text" name="pseudo" id="pseudo" value="{$pseudo}" /><br />
<label for="message">Message :</label>
<textarea name="message" id="message">{$message}</textarea><br />
<input type="hidden" name="idMessage" value="{$idMessage}" />
<input type="hidden" name="idSujet" value="{$idSujet}" />
 
<label>&nbsp;</label><input type="submit" value="Poster" />
</fieldset>
</form>
</BODY>
</html>

13/11/2007, 15h16
bendede

Réponse rapide le_chomeur :) ,je testerai ça ce soir avant de mettre "Résolu", mais, à essayer de comprendre ton code, ça me semble tout bon!

Merci bien, en plus j'aurai surment l'occasion de réutiliser cette manipulation du dom javascript!
13/11/2007, 15h39
le_chomeur

je t'en pris :)
si tu as besoins d'explication supplémentaire ( par rapport aux commentaires ) n'éhsite pas.

Coordialement
13/11/2007, 20h03
bendede

Citation:

Envoyé par le_chomeur

je t'en pris :)
si tu as besoins d'explication supplémentaire ( par rapport aux commentaires ) n'éhsite pas.

Coordialement

Ca devrait aller pour cette partie, je saurai m'en sortir. Merci encore :D.