Affichage champ de formulaire

Version imprimable

Bonjour tout le monde tout d'abord,

Je suis en train de créer un formulaire d'inscription, tout est fait (regex...) sauf que j'ai envie d'afficher des champs de formulaires html avec javascript (alert). Le problème est que j'ai tout essayé : alert(champFormulaire) ou alert("champFormulaire") ou même les simples quotes... Bref pétage de boulons un petit quand même. Je dois faire quelque chose de mal à mon avis et c'est pour cela que j'en remets à vous.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
script type="text/javascript"> 
function verification()
{
   var inputList =                                document.forms["formInscription"].elements;
   var alertTxt = "";
 
   var erreur = false;
 
   for (var i = 0; i <= inputList.length; i++)
   {
      alert('ca marche');
 
      if (inputList[i].type=="text" && inputList[i].value == "")
      {
	 alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
      }
      else erreur = true;
   }
 
   alert(alertTxt);
 
   return true;
}

Le alert de "ca marche" fonctionne donc on rentre bien dans la boucle. Le gros soucis est que je n'arrive pas à accéder aux champs du formulaire "formInscription" tout simplement.

Le formulaire :

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
 
<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >
 
   <fieldset>
	<legend><font color="#ff7300"> Vos coordonnées </font></legend> <!-- Titre du fieldset -->
 
	<br />
 
	<div style="background-color:beige">
	<label for="nom"><strong>Nom* :</strong></label><input type="text" name="nom" /> <br />
	<label for="prenom"><strong>Prénom* :</strong></label><input type="text" name="prenom" /><br />
	<label for="adresse"><strong>Adresse* :</strong></label><input type="text" name="adresse" /><br />
	<label for="codeP"><strong>Code postal* :</strong></label><input type="text" name="CP" /><br />
	<label for="ville"><strong>Ville* :</strong></label><input type="text" name="ville" /><br />
	<label for="pays"><strong>Pays* :</strong></label><input type="text" name="pays" /><br />
	<label for="email"><strong>Email* :</strong></label><input type="text" name="email" /><br /> <br />
 
	<strong>* Champs obligatoires</strong> <br /> <br />
 
	<input type="submit" value="Valider le formulaire d'inscription" /> <br /><br />
 
     </fieldset>
 
     <br />
 
</form>

Je vous remercie beaucoup d'avance pour votre aide

bonjour,

essaye en remplaçant

Code:

1
2
 
var inputList =  document.forms["formInscription"].elements;

par

Code:

1
2
 
var inputList =  document.getElementById("formInscription").getElementsByTagName("input");

09/07/2011, 20h54
delphin2
Citation:
Envoyé par Auteur

bonjour,

essaye en remplaçant

Code:

1 2 var inputList = document.forms["formInscription"].elements;

par

Code:

1 2 var inputList = document.getElementById("formInscription").getElementsByTagName("input");
Cela ne m'affiche que "ça marche" rien d'autre. A croire que l'alert à la fin n'est pas reconnu. 8O

Même avec cela rien ne s'affiche 8O :

Code:

1
2
3
4
if(document.formInscription.nom.value=='')
{
   alert('Le champ NOM ne peut pas rester vide !');
}

09/07/2011, 21h06
Auteur

en effet c'est curieux :koi:

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Personnellement je n'aime pas ce genre d'écriture

Code:

document.formInscription.nom.

je préfère utiliser l'attribut id que name ;)
09/07/2011, 21h10
delphin2
Citation:

Envoyé par Auteur

en effet c'est curieux :koi:

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Tout à fait d'accord, la balle de fusil sera pour après quoique je n'ai pas d'arme chez moi mdr :aie:

Même avec ça rien ne s'affiche alors que c'était la solution d'un des forumeurs :
Code:

1 2 if (document.formInscription.nom) { alert('Le champ nom existe'); }
Le lien de l'autre post :

http://www.developpez.net/forums/d23...champs-existe/
09/07/2011, 21h15
delphin2

Citation:

Envoyé par Auteur

en effet c'est curieux :koi:

Le test contenu dans la boucle fonctionne, j'ai tout vérifié. Il semblerait que le formulaire soit envoyé dès que la boucle se termine.

Personnellement je n'aime pas ce genre d'écriture

Code:

document.formInscription.nom.

je préfère utiliser l'attribut id que name ;)

Sans être curieux ;), comment as-tu vérifié que la boucle fonctionnait?
Tu as réussi à afficher quelque chose suite au test if?
09/07/2011, 21h21
Auteur

j'ai simplement remplacé ton alert("ça marche") par :

Code:

alert(inputList[i].type);

=> affiche bien "text"

Code:

alert(inputList[i].value);

=> affiche bien le contenu des input

Code:

alert(alertTxt);

=> on a bien un message

et pour vérifier si le test est vrai :

Code:

alert(inputList[i].type=="text" && inputList[i].value == "");

Pour le test je cliquais sur "envoyer" sans remplir le formulaire ;)

J'ai placé ces alert() dans la boucle. Mais une fois sorti de la boucle plus rien :( et la page se recharge.

Simplement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript"> 
function verification()
{
	//on met les elements du formulaire dans une variable
	var inputList = document.forms["formInscription"].elements;
	//variable - gestion erreur -
	var alertTxt = "";
	var erreur = false;
	//boucle de parcourt du tableau inputList
	for (var i = 1; i < inputList.length-1; i++){
			if ((inputList[i].type=="text") && (inputList[i].value == ""))	{
				alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
			}else{
				erreur = true;
			}
	}
   alert(alertTxt);
   return true;
}
</script>

(fonctionnel)

09/07/2011, 21h37
delphin2

Citation:

Envoyé par Auteur

j'ai simplement remplacé ton alert("ça marche") par :

Code:

alert(inputList[i].type);

=> affiche bien "text"

Code:

alert(inputList[i].value);

=> affiche bien le contenu des input

Code:

alert(alertTxt);

=> on a bien un message

et pour vérifier si le test est vrai :

Code:

alert(inputList[i].type=="text" && inputList[i].value == "");

Pour le test je cliquais sur "envoyer" sans remplir le formulaire ;)

J'ai placé ces alert() dans la boucle. Mais une fois sorti de la boucle plus rien :( et la page se recharge.

J'ai testé aussi avec tous les alerts. Ca marche.
J'ai essayé le alert(alertTxt); à la sortie de la boucle for et il m'a affiché tous les messages qu'il fallait afficher donc à priori ça marche la concaténation des messages + variables + affichage en sortie de boucle.

Mais dès que je rentre un champ et que j'en laisse vide plus aucun message ne s'affiche là j'avoue ne pas comprendre. Par contre, dans la boucle tout s'affiche parfaitement les messages sont bien affichés

Bonjour,
- il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME
- il faut boucler de i= 0 à i < Tableau.length, les indices des tableaux, ici une nodeList, commençant à 0
- il faut retourner false si une erreur est détectée, si alertTxt est non vide donc

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
function verification() {
  // var inputList = document.forms["formInscription"].elements;
  // GET l'objet FORM par son ID, comme elle n'a pas de name
  var oForm = document.getElementById('formInscription');
  var inputList = oForm.elements;
  var nb =  inputList.length;
  var alertTxt  = "";
//  var erreur = false;
//  for (var i = 0; i <= inputList.length; i++) {
  for (var i = 0; i < nb; i++) {
//    alert('ca marche');
    if (inputList[i].type == "text" && inputList[i].value == "") {
      alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n';
    }
//    else{
//      erreur = true;
//    }
  }
  // ERREUR Dectecte on affiche
  if( alertTxt.length){
    alert(alertTxt);
    return false;
  }
  // pas de soucis on soumet
  return true;
}

Citation:
Envoyé par NoSmoking
Bonjour,
- il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME
- il faut boucler de i= 0 à i < Tableau.length, les indices des tableaux, ici une nodeList, commençant à 0
- il faut retourner false si une erreur est détectée, si alertTxt est non vide donc
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 function verification() { // var inputList = document.forms["formInscription"].elements; // GET l'objet FORM par son ID, comme elle n'a pas de name var oForm = document.getElementById('formInscription'); var inputList = oForm.elements; var nb = inputList.length; var alertTxt = ""; // var erreur = false; // for (var i = 0; i <= inputList.length; i++) { for (var i = 0; i < nb; i++) { // alert('ca marche'); if (inputList[i].type == "text" && inputList[i].value == "") { alertTxt += 'Le champ ' + inputList[i].name + ' n\'a pas été rempli \n'; } // else{ // erreur = true; // } } // ERREUR Dectecte on affiche if( alertTxt.length){ alert(alertTxt); return false; } // pas de soucis on soumet return true; }
Tout d'abord un grand respect car tout cela marche.

"Il faut récupérer l'objet FORM, ou en le passant à la fonction, avec this, ou via document.getElementById attendu qu'elle n'a pas de NAME"

Je n'ai pas bien compris cette partie. Tu veux dire que les champs dans la liste n'ont pas de NAME mais des ID c'est ça?

09/07/2011, 22h48
NoSmoking

Citation:

Je n'ai pas bien compris cette partie. Tu veux dire que les champs dans la liste n'ont pas de NAME mais des ID c'est ça?

NON uniquement pour ton formulaire n'ayant pas de NAME

Code:

<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >

seul IE, même si les autres reconnaissent document.forms["formInscription"], en absence de NAME va chercher si il y a une ID.

Tous tes INPUTs ont un NAME ce qui est préférable si tu veux les transmettre au serveur.
09/07/2011, 23h07
Auteur

j'avoue ne pas avoir compris pourquoi

Code:

var inputList = document.getElementById("formInscription").getElementsByTagName("input");

n'a rien donné :koi:

Ou c'est juste à cause de la boucle for qui ne commence pas à 0 ??
Qu'est-ce que j'ai raté ? :oops:
09/07/2011, 23h15
NoSmoking

Code:

var inputList = document.getElementById("formInscription").getElementsByTagName("input");

et

Code:

var inputList = document.forms["formInscription"].elements;

c'st la même chose...

l'ERREUR est ici

Code:

for (var i = 0; i <= inputList.length; i++) {

i arrive donc à valoir inputList.length et il n'y a pas d'élément inputList[inputList.length]
09/07/2011, 23h28
delphin2

Citation:

Envoyé par NoSmoking

NON uniquement pour ton formulaire n'ayant pas de NAME

Code:

<form id="formInscription" action="formsInscription.php" method="post" onSubmit="return verification()" >

seul IE, même si les autres reconnaissent document.forms["formInscription"], en absence de NAME va chercher si il y a une ID.

Tous tes INPUTs ont un NAME ce qui est préférable si tu veux les transmettre au serveur.

Ok je capte une inattention de ma part en plus par rapport à l'ID. Vraiment merci beaucoup à toi :D
09/07/2011, 23h29
delphin2

Citation:

Envoyé par NoSmoking

Code:

var inputList = document.getElementById("formInscription").getElementsByTagName("input");

et

Code:

var inputList = document.forms["formInscription"].elements;

c'st la même chose...

l'ERREUR est ici

Code:

for (var i = 0; i <= inputList.length; i++) {

i arrive donc à valoir inputList.length et il n'y a pas d'élément inputList[inputList.length]

Qu'est ce que je suis bête (erreur de débutant pour ma part mon dieu mais ça saute aux yeux en plus :mouarf::aie:). Enfin le tout est de comprendre
09/07/2011, 23h32
delphin2

Merci à toi aussi Auteur pour ton aide et BByani car tu m'as résolu le problème également avec ce que j'ai utilisé.

J'ai quand même pas mal appris du coup sur Javascript que je ne connais pas du tout pour être honnête :roll:

Et hop un petit résolu :)