vérification de formulaire sous IE

**sbenett** · 23/11/2011, 11h39

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 :

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
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 :

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
<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** · 23/11/2011, 11h44

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 :

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

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** · 23/11/2011, 11h51

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** · 23/11/2011, 11h58

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** · 23/11/2011, 12h12

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** · 23/11/2011, 12h25

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** · 23/11/2011, 18h37

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** · 23/11/2011, 19h04

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** · 24/11/2011, 09h49

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** · 24/11/2011, 11h01

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 :

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

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 :

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

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 :

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

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** · 24/11/2011, 11h07

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

**sbenett** · 24/11/2011, 11h30

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

vérification de formulaire sous IE

JavaScript

Discussions similaires

Partager

Partager