Affichage champ de formulaire [Résolu]

[delphin2]

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

[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");

[delphin2]

Envoyé par Auteur

bonjour,

essaye en remplaçant

Code :

par

Code :

Cela ne m'affiche que "ça marche" rien d'autre. A croire que l'alert à la fin n'est pas reconnu.

[delphin2]

Même avec cela rien ne s'affiche :

Code :

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

[Auteur]

en effet c'est curieux

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

[delphin2]

Envoyé par Auteur

en effet c'est curieux

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

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/

[delphin2]

Envoyé par Auteur

en effet c'est curieux

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?

[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.

[BByani]

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)

[delphin2]

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

[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;
}

[delphin2]

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 :

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?

[NoSmoking]

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.

[Auteur]

j'avoue ne pas avoir compris pourquoi

Code :

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

n'a rien donné

Ou c'est juste à cause de la boucle for qui ne commence pas à 0 ??
Qu'est-ce que j'ai raté ?

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

[delphin2]

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

[delphin2]

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 ). Enfin le tout est de comprendre

[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

Et hop un petit résolu