Vérifier champ formulaire sans bouton

**buzzkaido** · 25/07/2007, 09h33

Pour ma part, j'ai toujours eu plus de soucis avec IE qu'avec FireFox, en tout cas pas concernant le javascript et le CSS.

Mais je developpe en general sous FF, ce qui explique peut-etre le probleme.

Il y a differentes extensions spéciales developpeurs sous FireFox :

- FireBug
- HTML Validator
- DOM Inspector

Je n'ai plus les liens sous la main, mais je te conseille de les installer, en general j'ai trouvé mes bugs grâce à ça.

Sinon, ben je vois pas du tout, parceque les operations que tu fais (à priori) sont très classiques, et fonctionne aussi bien sous IE que sous FF.

Il y a juste une contrainte avec l'id me semble-t-il. Je crois que c'est sous IE : il faut que l'attribut "name" et l'attribut "id" d'une balise ait la même valeur.

Sous les deux navigateurs, il faut que l'id d'une balise soit unique dans toute la page pour que ça marche bien.

Si tu veux poster ton code (en entier) je pourrais y jeter un oeil.

**Jiraiya42** · 25/07/2007, 09h53

Envoyé par buzzkaido

Pour ma part, j'ai toujours eu plus de soucis avec IE qu'avec FireFox, en tout cas pas concernant le javascript et le CSS.

Mais je developpe en general sous FF, ce qui explique peut-etre le probleme.

Il y a differentes extensions spéciales developpeurs sous FireFox :

- FireBug
- HTML Validator
- DOM Inspector

Je n'ai plus les liens sous la main, mais je te conseille de les installer, en general j'ai trouvé mes bugs grâce à ça.

Sinon, ben je vois pas du tout, parceque les operations que tu fais (à priori) sont très classiques, et fonctionne aussi bien sous IE que sous FF.

Il y a juste une contrainte avec l'id me semble-t-il. Je crois que c'est sous IE : il faut que l'attribut "name" et l'attribut "id" d'une balise ait la même valeur.

Sous les deux navigateurs, il faut que l'id d'une balise soit unique dans toute la page pour que ça marche bien.

Si tu veux poster ton code (en entier) je pourrais y jeter un oeil.

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
function VerifDate(champ) 
 {
  //On suppose que la date entrée a été validée auparavant  
  //au format yyyy/mm/dd  
  var day = document.getElementById(champ).value.substring(8,10); 
  var month = document.getElementById(champ).value.substring(5,7); 
  var year = document.getElementById(champ).value.substring(0,4); 
  while (document.getElementById("duree").options.length>0)
   {
    document.getElementById("duree").options[0] = null;
   }
    // La date est valide  
	var dateEntree = new Date(); 
	dateEntree.setDate(day); 
	dateEntree.setMonth(month); 
	dateEntree.setFullYear(year); 
	var aujourdhui = new Date();   
	var intervalleDeTemps =  (aujourdhui.getTime() - dateEntree.getTime())/(1000*60*60*24);
	if (intervalleDeTemps >= 730)  
	 {  
	  // Liste déroulante chargée avec 1 à 90
	  //document.getElementById("liste").options[1] = new Option(' ',' ');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('1','1');  
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('3','3'); 
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('5','5');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('8','8');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('10','10');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('15','15');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('20','20');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('30','30');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('45','45');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('60','60');
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('90','90'); 
	  document.getElementById("duree").options[document.getElementById("duree").length] = new Option('180','180');
	 }  
	else  
     {
	  if (intervalleDeTemps <= 730)  
	   {
	    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('90','90'); 
	   }  
	 }  
 }

Je vais regarder pour les extensions Firefox merci

**buzzkaido** · 25/07/2007, 09h59

Ben, à vue de nez, dans ta fonction, je vois pas ce qui pourrait clocher...

En fait, lié à mon champ "duree", j'ai un bouton qui avec un clique affiche un mini calendrier qui renvoit la valeur choisie dans le champ texte

Cette partie là de ton code, elle fonctionne bien sous les deux navigateurs ?

Tu utilises un DIV affiché par dessus ou une popup ?

Car avec une popup, tu doit surement utiliser window.opener.untruc pour transmettre la valeur, et il me semble que ça, sous FF, ça pose 2-3 problèmes.

Le traitement de javascript n'a pratiquement aucune difference entre IE et FF. Ce qui pose probleme, en general, c'est l'accès aux elements car le DOM n'est pas codé tout à fait pareil dans les deux.

Par exemple, un truc comme :

document.forms.nomDuFormulaire.nomDuChamp ce n'est pas standard, du coup FF ne le prend pas.

Par contre, les deux prennent :

document.forms[nomDuFormulaire].inputs[nomDuChamp]

Enfin, un truc dans ce genre, parcque là, c'est de mémoire...
En tout cas, moi j'utilise des ID partout où c'est possible, car le document.getElementById ne m'a jamais posé de soucis

**Bisûnûrs** · 25/07/2007, 10h02

Envoyé par buzzkaido

document.forms[nomDuFormulaire].inputs[nomDuChamp]

Enfin, un truc dans ce genre, parcque là, c'est de mémoire...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.forms[nomDuFormulaire].elements[nomDuChamp]

Mais en effet, il vaut mieux utiliser les ID, sachant que cette syntaxe ne passera pas si tu codes en XHTML, l'attribut name n'étant pas valide W3C pour les balises autres que celles des éléments de formulaire.

**Jiraiya42** · 25/07/2007, 10h06

Le calendrier c'est des div apparement vu que ya une feuille de style liée avec des div (je l'ai pas codé moi meme). J'ai hésité à poster la fonction vu la longueur, est-ce que ça peut aider ?

Le calendrier s'affiche très mal sous Firefox pour répondre à ta question

**buzzkaido** · 25/07/2007, 10h14

Si ça s'affiche tres mal sous FF, c'est surement un probleme de CSS/DOM

Postes quand meme le code du calendrier (avec le CSS) ça aidera.

**Jiraiya42** · 25/07/2007, 10h33

Les voici

Je vais regarder ce que tu dis niveau validité DOM et CSS

**buzzkaido** · 25/07/2007, 10h39

Effectivement, le code est enorme.

Il y a d'autres implementations d'un calendrier qui sont bien plus simples...

Mais aucune erreur ne m'a sauté aux yeux dans le code.

Si tu desactives ton calendrier et que tu entres une date à la main, ça marche sous FF ?

Parceque si c'est le cas, je te conseille de choper une autre source pour ton calendrier, celui-ci me parait trop gros pour etre honnete...

**Jiraiya42** · 25/07/2007, 11h05

Envoyé par buzzkaido

Effectivement, le code est enorme.

Il y a d'autres implementations d'un calendrier qui sont bien plus simples...

Mais aucune erreur ne m'a sauté aux yeux dans le code.

Si tu desactives ton calendrier et que tu entres une date à la main, ça marche sous FF ?

Parceque si c'est le cas, je te conseille de choper une autre source pour ton calendrier, celui-ci me parait trop gros pour etre honnete...

Ca marche pas meme si je désactive le calendrier, ya un truc qui doit pas plaire à Firefox

**buzzkaido** · 25/07/2007, 11h17

Arf ! C'est bizarre... ton code est pourtant sacrement standard !

Tu pourrais poster l'ensemble de ta page HTML ? (sans le calendrier)

Et en mettant des "alert" ça s'affiche sous FF ?

**Jiraiya42** · 25/07/2007, 11h36

Envoyé par buzzkaido

Arf ! C'est bizarre... ton code est pourtant sacrement standard !

Tu pourrais poster l'ensemble de ta page HTML ? (sans le calendrier)

Et en mettant des "alert" ça s'affiche sous FF ?

C'est quasi toujours ça dans ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<tr> 
			   <td>Date : </td>
			   <td><input type='text' name='date' id="date" class='input' value="2002/06/06" onChange="VerifDate('date')">
				   <input type="button" value="Cal" onclick="displayCalendar(document.forms[0].date,'yyyy/mm/dd',this)"></td>
			  </tr>

Ce qu'il y a de bizarre c'est que je viens de retourner sur le site de l'éditeur du calendrier avec Firefox et là il s'affiche correctement...

**Jiraiya42** · 25/07/2007, 11h49

Le problème du calendrier et réglé c'était un soucis de css mais la fonction ne marche toujours pas

**buzzkaido** · 25/07/2007, 11h56

essaies avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

displayCalendar(document.forms['nomDuFormulaire'].elements['date'],'yyyy/mm/dd',this);

Car comme je disais plus haut, il y a une difference dans la gestion du DOM entre IE et FF.

Par contre, onChange ne s'execute qu'apres un changement, donc il faut modifier le champ pour qu'il s'execute.

N'oublies pas non plus les ; après une ligne de code : (je suis pas sûr que ce soit absolument indispensable, mais c'est plus propre)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
onChange="VerifDate('date');"
onclick="displayCalendar(document.forms['nomDuFormulaire'].elements['date'],'yyyy/mm/dd',this);"

Et si tu remplaces ta fonction par ça :

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
function VerifDate(champ)
{
  alert("fonction lancée");
  //On suppose que la date entrée a été validée auparavant
  //au format yyyy/mm/dd
  var day = document.getElementById(champ).value.substring(8,10);
  var month = document.getElementById(champ).value.substring(5,7);
  var year = document.getElementById(champ).value.substring(0,4);
  while (document.getElementById("duree").options.length>0)
  {
    document.getElementById("duree").options[0] = null;
  }
  
  alert("Test 1");
  // La date est valide
  var dateEntree = new Date();
  dateEntree.setDate(parseInt(day));
  dateEntree.setMonth(parseInt(month));
  dateEntree.setFullYear(parseInt(year));
  var aujourdhui = new Date();
  var intervalleDeTemps = (aujourdhui.getTime() - dateEntree.getTime())/(1000*60*60*24);
  if (intervalleDeTemps >= 730)
  {
     alert("Test 2");
    // Liste déroulante chargée avec 1 à 90
    //document.getElementById("liste").options[1] = new Option(' ',' ');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('1','1');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('3','3');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('5','5');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('8','8');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('10','10');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('15','15');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('20','20');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('30','30');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('45','45');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('60','60');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('90','90');
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('180','180');
  }
  else
  {
    alert("Test 3");
    document.getElementById("duree").options[document.getElementById("duree").length] = new Option('90','90');
  }
  alert("Test 4");
}

j'ai aussi viré le 2nd test : if (intervalleDeTemps <= 730) puisqu'il est forcement vrai (le test contraire etant faux)

Vérifier champ formulaire sans bouton

JavaScript

Discussions similaires

Partager

Partager