11549 sujets

JavaScript, DOM et API Web HTML5

Bonsoir a tous j'ai un problème avec une page. je mexplique: jai des tableaux dynamiques dans une page (dont le nombre de ligne n'est donc pas défini). sur chaque ligne, j'ai un champ texte réservé a la date. je voudrais que lorsque l'on active mon formulaire, une verification soit effectuée pour vérifier si il ne reste pas de champs vides.
faire une verification d'un certain nombre de champ bien déterminé n'est pas compliqué, mais il est (pour moi) autrement vu que je ne peux pas savoir combien de lignes vont etre remplies...
les noms de mes champs text sont sous la forme suivante:
 <input type="text" name="date_1_1" ... />.... ligne en dessous :
<input type="text" name="date_1_2" ..../>

le premier chiffre correspond au numéro du tableau et le deuxieme au numéro de la ligne (ils sont générés en php).

il doit y avoir moyen en faisant une boucle mais comment????

j'avais essayé un peu de code mais ca ne va pas... (je vous le met quand meme on sait jamais..)

function check(numeTabl,numeLign) 
 var msg = "";


if (   document.Form["date_"+numeTabl+"_"+numeLign].value=="") {
  msg += "Veuillez indiquez une date\n";
  document.Form["date_"+numeTabl+"_"+numeLign].style.backgroundColor = "#F3C200";
 }

if (msg == "") return(true);
 else {
  alert(msg);
  return(false);
 }
}

le probleme c'est qu'il n'y a pas de boucle....


comment puis je faire? je suis vraiment bloqué puisque ceci bloque la mise en ligne de ma page....

merci
Modifié par falz (24 Nov 2006 - 09:56)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonsoir,
OUi, c'est faisable avec des boucles et document.getElementByName/Id.

Par exemple ce genre de boucle :

var i=0, j=0, o = null;
while ((o = document.getElementById('date_' + (i+=1) + '_1')) != null) {
j = 0;
while ((o = document.getElementById('date_'+i+'_'+(j+=1))) != null) {
// Fais ici ce que tu dois faire avec ton champ, il est enregistré dans la variable o
}}


Ceci est du live-coding, cela signifie par conséquent que je n'ai pas testé.
Le script commence par tester l'existance d'un date_1_1. S'il le trouve, il entre dans la boucle et essaie de parcourir date_1_1, date_1_2, date_1_3, etc. IL continue tant qu'un champ du nom recherché existe.
Dès le moment où il ne trouve plus de date_1_n, il passe à date_2_1, date_2_2, date_2_3, etc.
IL s'arrête lorsqu'il ne trouve plus de champ date_n_1.

L'inconvénient (peut-être ?) de ce système est que tu n'as pas le droit de sauter des numéros. Si tu as 1, 2, 3, 5, 6, les 5 et 6 ne seront jamais atteints car arrivé au 4 il croira que c'est la fin.

Voilà...
merci de ta réponse mais j'ai peur que cela ne résoude pas le problème... le principe est justement de vérifier que mon champ n'est pas vide. si j'applique ton code, comme tu l'a bien précisé, des qu'il va trouver un champ vide il va passer au tableau suivant, donc il ne va pas remarquer le trou...
Modifié par falz (19 Oct 2006 - 23:57)
Ca dépend ce que tu entends par champ vide....
1. un champ qui existe mais dont la valeur est vide
2. Un champ qui n'existe pas

J'ai compris ta demande comme étant celle du cas 1.
Dans le cas 1, mon script fonctionne ou devrait fonctionner.
Dans le cas 2, mon script est le parfait contre-exemple de ce qui ne faut pas faire.
Donc effectivement si ce que tu entendais par vide était le n°2, oublie mon script. Utilise le tableau elements pour parcourir tous les champs du formulaire si jamais ça peut t'aider.
autant pour moi tu a raison! tu avais bien compris c'est bien la solution 1!
voila ce que j'ai fait (j'ai un petit peu modifié ton script mais gardé ton raisonement... ais je eu tort??)

en fait il y aura surement des champs vides (toutes les lignes générées ne seront peut etre pas remplies...)
je fais donc une vérification pour voir si le nom a été rempli, dans quel cas il me faut absolument une date.


function check_vide() {
	
var i=0;
while(document.Form["nom_"+(i+=1)+"_1"].value !="")
{
	j=0;
	while(document.Form["nom_"+i+"_"+(j+=1)].value !="")
	{
		if(document.Form["date_"+i+"_"+j].value ="")
		{
			alert('Merci de remplir toutes les dates');
			return false;
		}
	}
}
}


cela ne fonctionne pas.. je ne dois pourtant pas etre loin ca m'énerve!
Je remonte ce petit sujet quelques temps après car il est malheursement toujours d'actualité.. je n'ai pas eu beaucoup le temps de m'y remettre ces derniers temps mais me voila reparti..
si quelqu'un voit ou est le problème.. je lui en serai vraiment très reconnaissant..

merci
Personne ne peut m'aider? je patauge vraiment la, je suis toujours bloqué.. je ne vois pas comment faire.

si je reprend le modele de QuentinC cela ne fonctionne pas..

ici on verifie si le champ existe.. je vois pas de probleme
var i=0, j=0, o = null;
while ((o = document.getElementById('nom_' + (i+=1) + '_1')) != null) {
j = 0;


//ici par contre on verifie si le champ existe, il me semble - or dans mon cas il faut vérifier s'il existe une valeur.. cela viendrait il d'ici? j'ai tenté avec != "" ou !=="" mais sans resultat...

while ((o = document.getElementById('nom_'+i+'_'+(j+=1))) != null) {


		if(document.Form["date_"+i+"_"+j].value ="")
		{
			alert('Merci de remplir toutes les dates');
			return false;
		}

}}


je n'aime pas faire le boulet, je suis vraiment désolé de vous embeter avec ça mais c'est super important pour moi...

merci
Modifié par falz (23 Nov 2006 - 00:02)
falz a écrit :

while ((o = document.getElementById('nom_'+i+'_'+(j+=1))) != null) {


		if(document.Form["date_"+i+"_"+j].value ="")
		{
			alert('Merci de remplir toutes les dates');
			return false;
		}

}}
Heu... Ce n'est pas étonnant que ça ne marche pas.

Pourquoi utilises-tu dans ta boucle document.Form["date_"+i+"_"+j] ? La propriété "Form" n'a jamais existée sur l'objet "document", c'est "forms" et ce n'est pas comme ça que l'on l'utilise.

Il te suffit pourtant d'utiliser l'objet o, comme te l'a indiqué QuentinC ("if o.value ...").

Bon courage.
merci mais j'utilise Form puisque c'est le nom de mon formulaire. <form name="Form" .../>
si j'utilise
je ne peux pas utiliser 'o' ici puisque 'o' renvoit la valeur du champ nommé "nom" et la je veux vérifier s'il y a bien une date qui lui correspond. (à chaque champ "nom" renseigné il doit avoir une date correspondante)
si j'utilise getElementById cela fait planter un autre code sur ma page... (un calendrier lorsque je clique sur le champ...), c'est la raison pour laquelle j'utilise Document.Form[...
falz a écrit :
merci mais j'utilise Form puisque c'est le nom de mon formulaire. <form name="Form" .../>
si j'utilise
je ne peux pas utiliser 'o' ici puisque 'o' renvoit la valeur du champ nommé "nom" et la je veux vérifier s'il y a bien une date qui lui correspond. (à chaque champ "nom" renseigné il doit avoir une date correspondante)
si j'utilise getElementById cela fait planter un autre code sur ma page... (un calendrier lorsque je clique sur le champ...), c'est la raison pour laquelle j'utilise Document.Form[...
Ah oui, au temps pour moi. Smiley confus
Modérateur
Salut,

Ce serait pourtant mieux d'éviter ce genre de syntaxe si tu es (ou que tu comptes passer) en xhtml1.0 Strict car name est invalide sur l'élément form dans ce cas. Le fait que getElementById fasse planter ton autre code n'est pas normal mais comme je pense que tu n'as pas trente six formulaires dans ta page, tu peux passer par getElementsByTagName.
j'ignorais que name était invalide dans l'élément form.. pourtant je vois ca partout c'est bizarre.. je vais voir ce que je peux faire..

finalement j'ai réussi à le faire marché, je n'avais pas bien saisi comment fonctionnait le script, et Eldebaran m'a mis sur le bon chemin en me parlant de o.value.... (je n'avais pas compris que c'était la qu'il fallait faire la vérification pour savoir si le champ nom etait vide....)
enfin bref mon code vérifie niquel ça maintenant! voila une grosse épine d'enlevé!
il y a juste encore un petit truc (pas bien méchant) mais je pige pas, lorsque je fais la vérification:

	if(o.value !== "" && document.Form["date_"+i+"_"+j].value =="")
	{
		alert('merci de renseigner tous les les champs date');
                          return false;

	}


en fait je pensais que le "return false" suffirait à annuler l'envoi de mon formulaire, mais il n'en est rien, puisque le formulaire est tout de meme envoyé. (il doit finalement juste arreter la boucle). Comment faire pour que le formulaire ne soit pas envoyé alors? sachant que j'applique le code sur mon bouton submit..

merci
falz a écrit :
en fait je pensais que le "return false" suffirait à annuler l'envoi de mon formulaire, mais il n'en est rien, puisque le formulaire est tout de meme envoyé. (il doit finalement juste arreter la boucle). Comment faire pour que le formulaire ne soit pas envoyé alors? sachant que j'applique le code sur mon bouton submit..
Il faut écrire
onsubmit="return check_vide();"

Modifié par Eldebaran (23 Nov 2006 - 12:00)