JSP et JavaScript | nombre variable de données à valider

Version imprimable

Bonsoir à tous,

J'ai dans mon projet une page JSP qui permet d'ajouter à la BD une entrée.
Lorsque le bouton ajouter est pesé, un fichier javascript est appelé et il valide les différents champs du formulaire.

Code:

<form id="formePrincipale" action="<%=appRoot%>/Directive" method="post" onsubmit="return validerFormulaireBP(this)">

Dans un des onglet de la page, j'ai un bouton servant à ajouter des inputs (nom et description par exemple).
Dans mon jsp

Code:

<input type="button" id="button" value="Insérer un document" onclick="addFile(this.value)"/>

Extrait du code JS appelé par le bouton (Pourquoi un Array? Parce que l'étudiant ayant débuté le projet l'as fait ainsi et que je veux faire fonctionner le code avant de l'optimiser.:?)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 numeroDoc++; var section = document.getElementById("contenu_onglet2"); var label = "Document " + numeroDoc + " : "; var nom = "Nom : "; // Creation des inputs var inputFile = new Array(); // Sera un input file var inputText = new Array(); // Sera un input text inputFile[0] = document.createElement("input"); inputFile[0].type= "file"; inputFile[0].name= "doc"; inputFile[0].id= "doc" + numeroDoc; inputText[0] = document.createElement("input"); inputText[0].type= "text"; inputText[0].name= "nom"; inputText[0].id= "nom" + numeroDoc;
Le bouton peut être pesé autant de fois que voulu mais tous les champs doivent être remplit. On aura donc : doc1 nom1 doc2 nom2 doc3 nom3...

Ma question est donc : comment faire le tout pour que dans mon javascript je puisse tout valider comme un tableau de données? Devrais-je faire une boucle dans mon JS? Mes inputs devraient-ils tous avoir le même noms (donc retirer leur numéro)?

J'attend vos solutions avec impatience:)
Merci

13/07/2010, 09h53
OButterlin

Bouton "pesé" = "cliqué" ? (je suppose)

Tu veux faire du file upload ?

J'ai du mal à te comprendre :koi:... pourrais-tu être plus précis dans la fonctionnalité recherchée ?
14/07/2010, 02h05
Thébé

Oui pesé = cliqué (désolé pour le Québecisme:oops:)

Après y avoir réfléchit alors que j'écrivais ma réponse, j'ai compris la complexité reliée au file upload par une application Web. (Comment le stocker de façon locale sur le serveur, pour la base de donnée, où dans l'arborescence, etc. ) Je vais en glisser un mot à mon superviseur à savoir comment cela sera implémenté au final.

D'ici là, admettons que les fichiers et images sont localement sur l'ordinateur.
Je clique sur le bouton permettant d'ajouter les deux inputs (doc1 et nom1).
Dans doc1, je charge le chemin d'accès (qui sera conservé dans la BD) et rentre le nom du document. Je peux cliquer autant de fois que voulues pour ajouter autant d'input que nécessaire.

Lorsque je clique sur valider. Je veux pour le moment que mon JS valide si tous les champs doc# et nom# ne sont pas vides. Ma question est donc : comment faire pour passer au javascript (ou qu'il ai chercher) toutes les données individuellement via un tableau de donnée ou une boucle pour valider qu'ils ne sont pas vide?

En espérant avoir été assez clair :)

A ta place, j'utiliserais toujours le même nom de champ (pas de séquence), c'est plus facile à gérer côté servlet, tu fais un simple

Code:

1
2
3
 
String[] files = request.getParameterValues("file");
String[] desc = request.getParameterValues("description");

tu as toujours la correspondance file[i] avec desc[i]...
Tu peux t'inspirer de ce code

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
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
 
<html>
<head>
<script>
 
function addRow()
{
  var tbl = document.getElementById("files");
  var row = tbl.insertRow(tbl.rows.length);
  var cell1 = row.insertCell(0);
  var inp1 = document.createElement("input");
  inp1.setAttribute("type", "file");
  inp1.setAttribute("name", "file");
  cell1.appendChild(inp1);
 
  var cell2 = row.insertCell(1);
  var inp2 = document.createElement("input");
  inp2.setAttribute("type", "text");
  inp2.setAttribute("name", "description");
  cell2.appendChild(inp2);
}
 
function validateAll()
{
  var files = document.getElementsByName("file");
  var descriptions = document.getElementsByName("description");
 
  for (var i = 0; i < files.length; i++)
  {
    if (files[i].value == "")
    {
      alert("Ligne " + (i+1) + " : Vous n'avez pas saisit le chemin");
      files[i].focus();
      break;
    }
    if (descriptions[i].value == "")
    {
      alert("Ligne " + (i+1) + " : Vous n'avez pas saisit la description");
      descriptions[i].focus();
      break;
    }
  }
}
</script>
</head>
 
<body>
 
<form>
<input type="button" value="Ajouter" onclick="addRow()"/>
<input type="button" value="Valider" onclick="validateAll()"/>
<table id="files" border=1 width=500>
<tr>
<td>Chemin</td>
<td>Description</td>
</tr>
</table>
</form>
</body>
</html>