vérification de formulaire sous IE [Résolu]

[sbenett]

Bonjour j'ai un formulaire composé de liste déroulante qui permettre de recherche des herbergements selon des critères de selection. J'ai une fonction javaScript qui verifie le formulaire avant l'envoi poour verifier que tous les champs sont bien remplis, problème, la verification ne fonctionne pas sous IE. En revanche aucun problème avec mozilla, google chrome, safari, ou autre. Est-ce que quelqu'un aurait une idée.

Je cite mon code, sa aidera surement.

Code php :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?php
echo "</thead>";
 
echo "<div id=\"form\">";
echo "<form onsubmit=\"return valider(this)\" method=\"POST\" action=\"resultat.php\" name=\"formualire\" >";
echo "<div id=\"legend\"><fieldset>";
echo "<table>";
echo "<legend>H&eacute;bergement</legend>";
 
 
$lien=connect_bdd();
		$requete="SELECT libelle_type from TYPE;";
		$resultat=mysql_query($requete,$lien);
		echo "<label for=\"champ\"></br>Type: </label><select required=\"true\" defval=\"--Choix--\" id=\"selectType\" name=\"selectType\" size=\"1\"><OPTION>--Choix--</OPTION>";
	    while (($libelle_type = mysql_fetch_row ($resultat))!=NULL) {
			echo "<OPTION>".$libelle_type[0]."</OPTION>";
		}
		echo "</select></br></br>";
 
 
 
 
echo "<label for=\"champ\">Prix: compris entre </label>";
echo "<select required=\"true\" defval=\"--Choix--\" id=\"prix1\" name=\"prix1\" size=\"1\"><OPTION>--Choix--</OPTION>";
 
echo "<OPTION>".$prix[0]."</OPTION>";
echo "<OPTION>".$prix[1]."</OPTION>";
echo "<OPTION>".$prix[2]."</OPTION>";
echo "<OPTION>".$prix[3]."</OPTION>";
echo "<OPTION>".$prix[4]."</OPTION>";
echo "<OPTION>".$prix[5]."</OPTION>";
echo "<OPTION>".$prix[6]."</OPTION>";
echo "<OPTION>".$prix[7]."</OPTION>";
echo "<OPTION>".$prix[8]."</OPTION>";
 
echo "</select>";
echo "<label for=\"champ\"> et </label>";
 
echo "<select required=\"true\" defval=\"--Choix--\" id=\"prix2\" name=\"prix2\" size=\"1\"><OPTION>--Choix--</OPTION>";
 
echo "<OPTION>".$prix[0]."</OPTION>";
echo "<OPTION>".$prix[1]."</OPTION>";
echo "<OPTION>".$prix[2]."</OPTION>";
echo "<OPTION>".$prix[3]."</OPTION>";
echo "<OPTION>".$prix[4]."</OPTION>";
echo "<OPTION>".$prix[5]."</OPTION>";
echo "<OPTION>".$prix[6]."</OPTION>";
echo "<OPTION>".$prix[7]."</OPTION>";
echo "<OPTION>".$prix[8]."</OPTION>";
 
echo "</select>";
echo "<label for=\"champ\"> €</label></br></br>";
 
echo "<label for=\"champ\"> Capacit&eacute: mini </label>";
echo "<select required=\"true\" defval=\"--Choix--\" id=\"capacite\" name=\"capacite\" size=\"1\"><OPTION>--Choix--</OPTION>";
 
echo "<option>".$capacite[0]."</option>";
echo "<option>".$capacite[1]."</option>";
echo "<option>".$capacite[2]."</option>";
echo "<option>".$capacite[3]."</option>";
echo "<option>".$capacite[4]."</option>";
echo "</select>";
echo "<label for=\"champ\"> personnes(s)</label></br></br>";
 
echo "<label for=\"champ\"> Localit&eacute: inf&eacute;rieur &agrave </label>";
echo "<select required=\"true\" defval=\"--Choix--\" id=\"localisation\" name=\"localisation\" size=\"1\"><OPTION>--Choix--</OPTION>"; 
echo "<option>".$localisation[0]."</option>";
echo "<option>".$localisation[1]."</option>";
echo "<option>".$localisation[2]."</option>";
echo "</select>";
echo "<label for=\"champ\"> km de Bains</label></br></br>";
 
 
 
echo "</table>";
echo "</fieldset></div></br>";
 
echo "<input type=\"reset\" value=\"Reinitialiser\">";
echo "<input type=\"submit\" id=\"valeur\" name=\"valeur\" value=\"Valider\">";
echo "</form>";	
echo "</div>";
echo "<p id=\"rouge\">*Tous les champs doivent &ecirc;tre remplis</p>";
 
?>

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
27
28
29
30
31
<script language="javascript" type="text/javascript">
 
function valider(){
 
  if(document.getElementById("selectType").value=="--Choix--") {
     alert("Veuillez selectionner un type!");
     return false;
  }
  if(document.getElementById("prix1").value=="--Choix--"){
     alert("Veuillez indiquer un prix mini!");
     return false; 
  }
  if(document.getElementById("prix2").value=="--Choix--"){   
     alert("Veuillez indiquer un prix maxi!");
     return false;
  }
  if(document.getElementById("capacite").value=="--Choix--"){
     alert("Veuillez selectionner une capacit\351!");
     return false; 
  }
  if(document.getElementById("localisation").value=="--Choix--"){
     alert("Veuillez selectionner une localisation!");
     return false; 
  }
  if(document.getElementById("prix1").value>document.getElementById("prix2").value){
     alert("Fourchette de prix incorrect, veuillez choisir un prix maxi sup&eacuterieur au prix mini!");
     return false;
  }
}
 
</script>

Décidemment je deteste IE... mais sachant que ce formulaire est destiné aux personnages agés principalement, je me dois qu'il fonctionne sous IE car c'est à 90% le navigateur qui sera utilisé quand le site sera opérationnel.

Merci de votre aide.

Sbenett

[Bovino]

Important : Les règles incontournables d'utilisation de ce forum.
Merci de poster le code HTML généré et pas le php...

Code php :

1
2
3
4
5
6
echo "</thead>";
 
echo "<div id=\"form\">";
echo "<form onsubmit=\"return valider(this)\" method=\"POST\" action=\"resultat.php\" name=\"formualire\" >";
echo "<div id=\"legend\"><fieldset>";
echo "<table>";

Tu fermes un thead, tu ouvres une div puis tu ouvres une table...

La structure HTML me semble un peu louche, ce qui pourrait expliquer que IE ne s'y retrouve pas...

[sbenett]

Désolé, je débute dans le domaine,

Je ferme un thead, préalablement ouvert, mais je n'ai pas cité cette partie de code, car elle me semblait inutile pour gérer le problème.

Ma structure thead, div et table devrait être organiser autrement?

Merci de ta réponse rapide, c'est peut-être une première solution que tu m'apportes, après quelques jours de casse tête, ça fait du bien de se sentir aidé.

[Bovino]

Dans une table, le seul contenu que tu peux mettre (en dehors des balises de structure de la table) doivent être dans des balises <td>.
Donc oui, ta table est mal élaborée et risque de poser des problèmes d'interprétation.

D'autre part, pour un select, le value correspond au value de l'option sélectionnée, si les balises <option> n'ont pas de value, IE n'aime pas ça (et au passage, defval n'existe pas).

[andry.aime]

Bonjour,

Pourquoi ne pas pas concaténer un texte que tu mets dans un seul alert pour citer tous les champs non remplis?

A+.

[sbenett]

Oui je pourrais éventuellement faire ca, mais ca ne corrigerait pas mon erreur pour autant?

D'autant plus que mes champs sont jamais vide puisqu'il y à une valeur par défaut à savoir "--Choix--".

Sous Mozilla ou autre navigateur prenant en compte mon javascript, l'alert spécifie quelle champ est pas défini.
Mais Sous IE sachant que l'envoi du formulaire, envoi par la suite des requete, il prend la valeur --Choix-- tel qu'elle dans la requete et renvoi evidemment un erreur de requete puisque elle correspond à rien dans ma base de donnée.

IE me complique bien la vie

[NoSmoking]

Bonjour,

IE me complique bien la vie

si les OPTIONs n'ont pas d'attribut value, ce qui est ton cas, IE ne récupère pas le text de l'OPTION, il me semble que c'est la bonne façon de réagir.

Dans ton cas le plus simple est de mettre des value à tes OPTIONs.

[Bovino]

Envoyé par NoSmoking

si les OPTIONs n'ont pas d'attribut value, ce qui est ton cas, IE ne récupère pas le text de l'OPTION, il me semble que c'est la bonne façon de réagir.

Entièrement d'accord !
Que IE puisse avoir un comportement parfois spécifique (bien que de gros efforts ont été faits depuis IE8 et surtout 9) et agaçant est une chose, s'en servir d'argument pour essayer de masquer ses lacunes et ses propres erreurs est un peu abusif.

[sbenett]

Envoyé par Bovino

Entièrement d'accord !
Que IE puisse avoir un comportement parfois spécifique (bien que de gros efforts ont été faits depuis IE8 et surtout 9) et agaçant est une chose, s'en servir d'argument pour essayer de masquer ses lacunes et ses propres erreurs est un peu abusif.

J'ai jamais voulu cacher mes erreurs et lacunes, je sais qu'elles sont présentes, et comme tous débutants, je trouve normal qu'elles le soient. Nous ne somme pas tous des professionnels,
Merci pour votre aide, j'essaye et je vous tiens au courant.

[sbenett]

Tout d'abord, désolé pour le double post.

J'ai suivi vos conseils, mais désormais en plus de ne toujours pas fonctionner sous IE, ça ne fonctionne plus sous les autre navigateurs.
Voici un exemple de ce que j'ai rajouté.

Code :

1
2
3
4
5
6
7
8
9
echo "<label for=\"champ\"> Capacit&eacute: mini </label>";
echo "<select id=\"capacite\" name=\"capacite\" size=\"1\"><OPTION value = \"capacite_defaut\">--Choix--</OPTION>";
 
echo "<option value = \"capacite1\">".$capacite[0]."</option>";
echo "<option value = \"capacite2\">".$capacite[1]."</option>";
echo "<option value = \"capacite3\">".$capacite[2]."</option>";
echo "<option value = \"capacite4\">".$capacite[3]."</option>";
echo "<option value = \"capacite5\">".$capacite[4]."</option>";
echo "</select>";

et voici le javascript lié à cette partie de code:

Code :

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript" type="text/javascript">
function valider(){
 
    if(document.getElementById("capacite").value == "--Choix--"){
         alert("Veuillez selectionner une capacit\351!");
         return false; 
    }
 
}
 
</script>

Je passe donc par les id de mes Select, et je vois que souvent les gens propose une structure de la forme :

Code :

1
2
3
if(document.formulaire.capacite.value == "--Choix--"){
       //instruction
}

Mais j'ai essayé, et ca ne fonctionne pas non plus.

Merci pour votre aide.

[Bovino]

Ben même temps, aucun value de vaut "--Choix--"

[sbenett]

Que suis-je bête, évidemment...

Désormais ca fonctionne, et même sous IE, Merci à tous.

Sujet clos et resolu.

edit; j'ai mis resolu dans le titre, je sais pas si y faut aussi locker le sujet? Je vous laisse en décider.

Encore merci