Validation formulaire ?

**samtheh** · 13/01/2008, 15h52

Bonjour à tous,

Je m'essaye au framwork dojo et j'ai quelques soucis...

Je n'arrive pas à valider un formulaire et à envoyer mes infos au serveur

Voici ce que je fais actuellement (j'ai essayé de nombreuses solutions) :

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
47
48
49
50
51
52
53
54
55
56
57
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 
  <!-- SECTION 1 -->
    <style type="text/css">
        @import "dojoroot/dijit/themes/tundra/tundra.css";
        @import "dojoroot/dojo/resources/dojo.css";
    </style>
 
    <script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
 
    <script type="text/javascript" src="dojoroot/dijit/dijit.js"></script>
    <script type="text/javascript" src="dojoroot/dijit/dijit-all.js"></script>
 
        <!-- SECTION 2 -->
    <script type="text/javascript">
       // Load Dojo's code relating to the Button widget
          dojo.require("dijit.Editor");
          dojo.require("dojo.parser" );
          dojo.require("dijit.form.Textarea");
          dojo.require("dijit.form.Button");
          dojo.require("dijit.Toolbar");
 
        function valideSubmit()
        {
                submit();
        }
 
        function initTestUpload()
        {
            dojo.event.connect(dojo.byId("TEST_UPLOAD"), "onclick", "valideSubmit");
        }
 
        dojo.addOnLoad(initTestUpload);
    </script>
</head>
<body class="tundra">
 
<form name="form1" id="demoForm" method="post" action="../S_TestsDojoEditor">
    <textarea name="field_1" height="175px" width="200px" dojoType="dijit.Editor" >
            <ul>
                <li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>
                <li>This is the Editor with a Toolbar attached.</li>
            </ul>
    </textarea>
    <input type="submit" value="test it" id="TEST_UPLOAD">
</form>
 
 
<hr class="spacer">
 
</body>
</html>

Coté serveur je reccupere la variable et je l'affiche tout simplement.

Sous IE 6.0 j'ai comme résultat : le code HTML inséré des le départ (comme ci-dessus) si je le modifie c'est toujours le même texte affiché coté serveur.

Sous FireFox j'ai comme résultat : null

Est ce que quelqu'un a une idée ??? Je ne trouve rien sur le net.
La doc dojo est détaillée mais j'ai l'impression qu'il n'y a rien sur la communication client --> serveur, je ne parle pas des communications serveur --> client.

Merci de vos aides en tout cas !!

**samtheh** · 15/01/2008, 14h34

Personne n'a été confronté au problème ?

Je vous remercie de vos aides !!

**fayred** · 15/01/2008, 14h57

Bonjour,

voila ce dont je me sers pour envoyer mes scripts au serveur :

page principale :

Code :

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

1
2
3
4
 
<form id="formulaire"  method="post">
<input id="envoi" type="button" onclick="envoiFormulaire();" value="Valider"/>
</form>

script js :

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
 
function envoiFormulaire()
{
 
  dojo.io.bind({
         url: '../php/enregistrer.php', /*Url de traitement des donnees du formulaire*/
 
		load: function(type, data, evt)
			{
					if (type=="load")
						{
							if (type == 'error')
												      alert('Error when retrieving data from the server!');
							  else
							{
							          alert(data);
 
							}
						}
					},
                  formNode: dojo.byId('formulaire')
           });
 
 
}

Je ne suis pas sure que ce soit la bonne méthode mais je n'ai rien trouvé d'autre et en tout cas ça marche tres bien.

Bon courage!
Et si tu trouves autre chose n'hésites pas à le poster, ça m'interresse!

**samtheh** · 19/01/2008, 10h21

Qu'inclue tu comme librairies dojo ?

Je n'ai pas le script io.js dans ma version......

**mplasse** · 21/01/2008, 00h10

Bonjour,

Le problème semble venir d'un bug de dojo : pour construire l'éditeur, dojo modifie énormément la structure HTML (voyez le résultat avec Firebug), et le champ de nom field_1 n'est plus du tout un textarea, si bien que le contenu de l'éditeur n'est pas envoyé au serveur lors de la soumission du formulaire.

Voici un contournement. En JavaScript, il est possible de récupérer le contenu de l'éditeur construit sur le champ field_1 par dijit.byId("field_1").getValue(). Lors de la validation du formulaire, nous pouvons donc copier ce contenu dans un simple champ caché, qui sera alors transmis côté serveur.

Rajoutons donc dans le HTML un champ caché. Donnons-lui pour nom et pour id editorContent. Le nom est pour la validation, et le id pour dojo.

Code :

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

1
2
3
4
5
6
7
8
 
<form method="post" action="../S_TestsDojoEditor">
  <input type="hidden" name="editorContent" id="editorContent"/>
  <textarea id="field_1" height="10" dojoType="dijit.Editor" >
     (ici le contenu)
  </textarea>
  <input type="submit" value="test it" id="TEST_UPLOAD">
</form>

Modifions le JavaScript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <!-- SECTION 2 -->
  <script type="text/javascript">
    dojo.require("dijit.Editor");
 
    function demoFormOnSubmit() {
      // Mettre dans le champ cache du formulaire le contenu de l'editeur
      dojo.byId("editorContent").value = dijit.byId("field_1").getValue();
    }
 
    dojo.addOnLoad(function() {
      dojo.connect(dojo.byId("demoForm"), "onsubmit", demoFormOnSubmit);
    });
</script>

La réaction récupère le contenu de l'éditeur et le met dans notre champ caché. Le programme côté serveur devra alors le lire dans le paramètre de nom editorContent.

Au passage, il vaut mieux faire réagir à l'événement submit sur le formulaire, plutôt qu'au clic sur le bouton de validation : s'il y a un champ de saisie texte, l'utilisateur pourrait soumettre le formulaire en tapant entrée dans ce champ. Avec l'événement sur le bouton, la réaction n'aurait pas lieu, alors qu'elle est garantie avec l'événement sur le onsubmit.

Dernière remarque : les sources dojo pèsent très très lourd, et si vous n'avez pas besoin d'autres widgets sur la page, il vaut mieux limiter les require et les inclusions de script au strict nécessaire. Dans la section 2, un seul require suffit ("dijit.Editor"), et dans la section 1, il suffit d'écrire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
  <!-- SECTION 1 -->
    <style type="text/css">
        @import "/cours/ajax/toolkits/dojo-release-1.0.2/dijit/themes/tundra/tundra.css";
        @import "/cours/ajax/toolkits/dojo-release-1.0.2/dojo/resources/dojo.css";
    </style>
 
	<script src="/cours/ajax/toolkits/dojo-release-1.0.2/dojo/dojo.js" 
    type="text/javascript" djConfig="parseOnLoad: true"></script>
 
	<script src="/cours/ajax/toolkits/dojo-release-1.0.2/dijit/dijit.js"
    type="text/javascript"></script>

Envoyé par samtheh

Bonjour à tous,

Je n'arrive pas à valider un formulaire et à envoyer mes infos au serveur

Coté serveur je récupère la variable et je l'affiche tout simplement.

Sous IE 6.0 j'ai comme résultat : le code HTML inséré des le départ (comme ci-dessus) si je le modifie c'est toujours le même texte affiché coté serveur.

Sous FireFox j'ai comme résultat : null

**samtheh** · 22/01/2008, 22h02

Cela ne fonctionne pas....

Ma variable affichée coté serveur m'affiche cette fois pour les deux navigateurs absolument rien, enfin du texte vide sans même aucun espace.

Je ne comprend pas.....

Merci de votre aide !!!

**mplasse** · 24/01/2008, 23h41

Envoyé par samtheh

Cela ne fonctionne pas....
Ma variable affichée coté serveur m'affiche cette fois pour les deux navigateurs absolument rien, enfin du texte vide sans même aucun espace.

Comme je ne sais pas ce que fait votre programme côté serveur, voici le code complet - validé sous IE6 comme sous Firefox 2 - de la page avec le code côté serveur.
Pour que ce soit compact, j'ai tout mis dans une page PHP. Lors du premier appel, elle affiche le formulaire contenant l'éditeur dojo, et lorsque l'utilisateur valide le formulaire, celui-ci est envoyé vers la même page qui renvoie alors le contenu simple saisi dans l'éditeur.
Voici le code :

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
47
48
49
50
51
52
 
<?php
// Racine de la distribution dojo (a adapter a votre arborescence de site)
$dojoRoot = "/cours/ajax/toolkits/dojo-1.0.2";
 
if (array_key_exists("editorContent", $_POST)) {
  // Traitement si formulaire soumis : affiche simplement le contenu de l'editeur
        print "Contenu reçu : $_REQUEST[editorContent]";
}
else {
  // Affiche le formulaire
        print<<<END
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
      @import "$dojoRoot/dijit/themes/tundra/tundra.css";
      @import "$dojoRoot/dojo/resources/dojo.css";
    </style>
    
        <script src="$dojoRoot/dojo/dojo.js" 
    type="text/javascript" djConfig="parseOnLoad: true"></script>
        
        <script src="$dojoRoot/dijit/dijit.js"
    type="text/javascript"></script>
    
  <script type="text/javascript">
    dojo.require("dijit.Editor");

    function demoFormOnSubmit() {
      // Mettre dans le champ cache du formulaire le contenu de l'editeur
      dojo.byId("editorContent").value = dijit.byId("field_1").getValue();
    }
                
    dojo.addOnLoad(function() {
      dojo.connect(dojo.byId("demoForm"), "onsubmit", demoFormOnSubmit);
    });
  </script>
</head>
<body class="tundra">
  <form id="demoForm" method="post" action="$_SERVER[PHP_SELF]">
    <input type="hidden" name="editorContent" id="editorContent" />
    <textarea id="field_1" dojoType="dijit.Editor" height="150px">
       (ici le contenu)
    </textarea>
    <input type="submit" value="test it" id="TEST_UPLOAD" />
  </form>
</body>
END;
}
?>

Bien sûr, il vaut mieux utiliser l'éditeur dojo avec une sauvegarde en Ajax, c'est à dire que le bouton sauver effectue la sauvegarde sur le serveur et indiquera simplement que ça s'est bien passé par un message sur la page.
Voici une variante de la page précédente, qui fait cela :

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
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
<?php
// Racine de la distribution dojo (a adapter a votre arborescence de site)
$dojoRoot = "/cours/ajax/toolkits/dojo-1.0.2";
// Nom du fichier a sauver (ou mettre a jour) dans le meme repertoire que la page PHP
$file = "editorContent.html";
// Chemin de ce fichier
$path = dirname($_SERVER["SCRIPT_FILENAME"])."/$file";
 
if (array_key_exists("editorContent", $_POST)) {
  // Contenu au format par defaut des editeurs (ici, sous windows)
  $contentFile = mb_convert_encoding($_POST["editorContent"], "windows-1252", "UTF-8");
  // Nouvelle taille  du fichier
	$nbOctets = file_put_contents($path, $contentFile);
  // Reponse Ajax
	print "Fichier <a href='$file'>$file</a> mis &agrave; jour ($nbOctets caract&egrave;res)";
}
else {
  // Recuperer le contenu du fichier a mettre a jour
  $contentFile = file_get_contents($path) or "";
  // Afficher le formulaire contenant l'editeur
	print<<<END
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Edition du fichier $file</title>
    <style type="text/css">
        @import "$dojoRoot/dijit/themes/tundra/tundra.css";
        @import "$dojoRoot/dojo/resources/dojo.css";
    </style>
 
	<script src="$dojoRoot/dojo/dojo.js" 
    type="text/javascript" djConfig="parseOnLoad: true"></script>
 
	<script src="$dojoRoot/dijit/dijit.js"
    type="text/javascript"></script>
 
	<script type="text/javascript">
dojo.require("dijit.Editor");
 
function editorSave() {
	// Mettre le contenu de l'editeur dans le champ cache
	dojo.byId("editorContent").value = dijit.byId("editorField").getValue();
	// Soumettre le formulaire via Ajax
	dojo.xhrPost( {
		url: "$_SERVER[PHP_SELF]", // Programme cote serveur
		handleAs: "text",
		timeout: 5000, // Delai d'attente maximal en millisecondes
		load: function(response, ioArgs) { // Reaction si succes
			dojo.byId("message").innerHTML = response;
			//return response;
		},
		error: function(response, ioArgs) { // Reaction si echec
			dojo.byId("message").innerHTML = "Erreur HTTP " + ioArgs.xhr.status;
			//return response;
		},
		form: "editorForm"
	});
}
 
		dojo.addOnLoad(function() {
			dojo.connect(dojo.byId("editorSaveButton"), "onclick", editorSave);
		});
	</script>
</head>
 
<body class="tundra">
  <div id="message">Mise &agrave; jour du fichier <a href='$file'>$file</a></div>
  <hr />
  <form id="editorForm" action="javascript:">
  	<input type="hidden" name="editorContent" id="editorContent" />
  	<textarea id="editorField" height="100px" dojoType="dijit.Editor" >
    $contentFile
  	</textarea>
  	<input type="button" value="Sauver" id="editorSaveButton" />
  </form>
</body>
</html>
END;
}
?>

Comme le code est commenté, j'ajoute juste une remarque : le contenu de l'éditeur est envoyé au serveur encodé en UTF-8. Soit nous sauvons tout et envoyons tout au format UTF-8, soit nous convertissons tout au format par défaut du système, et comme je suis sous Windows, j'ai pris windows-1252. C'est pourquoi le contenu récupéré est converti grâce à mb_convert_encoding. Je n'utilise pas iso-8859-1 car il ignore les caractères œ et €.

De cette façon, l'éditeur marche aussi avec nos caractères accentués.

Cet exemple en PHP s'adapte simplement en J2EE : la page qui contient le formulaire devient une JSP, et le code qui met à jour le fichier côté serveur est dans le contrôleur (servlet, ou si vous êtres en struts, classe action). En .Net, le formulaire se mettrait dans le aspx, et le traitement serveur dans le code behind.

IE et Firefox envoient un contenu légèrement différent : Firefox envoie des caractères blancs supplémentaires, au contraire d'IE qui envoie juste ce qu'il faut, semble-t-il.

Ci-dessous, deux images de l'édition et de la sauvegarde.

**samtheh** · 28/01/2008, 10h32

Je me retrouve avec une erreur en essayant l'enregistrement en ajax. La validation du formulaire ne foncitonnant toujours pas.

Voici l'erreur que j'ai avec firebug :

Code :

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

dojo.byId("editorContent").value = dijit.byId("field_1").getValue();

FireBug m'indique :

Code :

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

dojo.byId("field_1") has no properties

Voici mon code coté client : (petite précision pour les chemins, mon fichier client se trouve dans un dossier voici pourquoi je remonte une fois dans l'arborescence avant d'appeler ma servlet, mais cela fonctionne très bien)

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 
  <!-- SECTION 1 -->
    <style type="text/css">
        @import "dojoroot/dijit/themes/tundra/tundra.css";
        @import "dojoroot/dojo/resources/dojo.css";
    </style>
 
	<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
	<script src="dojoroot/dijit/dijit.js" type="text/javascript"></script>
    	<!-- SECTION 2 -->
    <script type="text/javascript">
    dojo.require("dijit.Editor");
 
    function editorSave() {
      // Mettre dans le champ cache du formulaire le contenu de l'editeur
      dojo.byId("editorContent").value = dijit.byId("field_1").getValue();
 
      dojo.xhrPost( {
		url: "../S_TestsDojoEditor", // Programme cote serveur
		handleAs: "text",
		timeout: 5000, // Delai d'attente maximal en millisecondes
		load: function(response, ioArgs) { // Reaction si succes
			dojo.byId("message").innerHTML = response;
			//return response;
		},
		error: function(response, ioArgs) { // Reaction si echec
			dojo.byId("message").innerHTML = "Erreur HTTP " + ioArgs.xhr.status;
			//return response;
		},
		form: "editorForm"
	});
    }
 
    dojo.addOnLoad(function() {
      dojo.connect(dojo.byId("editorSaveButton"), "onclick", editorSave);
    });
    </script>
</head>
<body class="tundra">
<div id="message">Text saisi</div>
<form name="form1" id="editorForm" method="post" action="../S_TestsDojoEditor">
	<input type="hidden" name="editorContent" id="editorContent"/>
	<textarea name="field_1" height="175px" width="200px" dojoType="dijit.Editor" >
			Zone éditable
	</textarea>
 
	<input type="button" value="Sauver" id="editorSaveButton" />
</form>
 
 
<hr class="spacer">
 
</body>
</html>

Voici mon code coté serveur :

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
47
 
package tests;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class for Servlet: S_TestsDojoEditor
 *
 */
 public class S_TestsDojoEditor extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
   static final long serialVersionUID = 1L;
 
    /* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#HttpServlet()
	 */
	public S_TestsDojoEditor() {
		super();
	}   	
 
	/* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}  	
 
	/* (non-Java-doc)
	 * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
 
		String textArea = request.getParameter("editorContent");
 
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<HTML><BODY><H1>test :</H1>");
		out.println("text saisi : :" + textArea+":");
		out.println("</BODY></HTML>");
 
	}   	  	    
}

**dingoth** · 28/01/2008, 12h54

L'erreur provient du client, pas du serveur.

Remplace la ligne

Code :

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

<textarea name="field_1" height="175px" width="200px" dojoType="dijit.Editor" >

par

Code :

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

<textarea id="field_1" name="field_1" height="175px" width="200px" dojoType="dijit.Editor" >

L'erreur est la suivante :
dojo recherche un élément en fonction de son id et pas de son name. IE est plus souple et autorise l'élément name comme étant un champ id, ce que ne permet pas Firefox (qui fait exactement ce que le standard veut, lui).

Validation formulaire ? [Dojo]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager