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

**bendede** · 13/11/2007, 12h11

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:

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

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:

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

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

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

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

**le_chomeur** · 13/11/2007, 13h20

voici un exemple basé sur ton code et commenté

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

**bendede** · 13/11/2007, 15h16

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!