Validation automatique d'un formulaire

**legrandse** · 09/06/2011, 12h24

Bonjour tout le monde.

Ben oui çà à l'air simple mais je ne vois pas ce qui ne fonctionne pas dans mon script.

Pour être plus précis, un script se charge de remplir des champs de lecture de carte d'identité (nom, prénom, ...)

Théoriquement quand il détecte que le champs "reg" est remplis, il doit me valider le formulaire automatiquement.

Voici ma fonction:

Code :

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

1
2
3
4
5
6
7
8
9
<script language="javascript">
function submitForm(){
    var champs = document.getElementById('natNumberField');
    if(champs.value != ''){
		var form = document.getElementById('formu');
		form.submit();
	}
}
</script>

L'id de mon formulaire est bien "formu" et l'id de reg est bien "natNumberField"

et j'ai bien

Code :

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

<body onLoad = "focus(); submitForm()">

Que dois-je ajouter d'autre ?

Merci pour votre aide.

**vermine** · 09/06/2011, 12h31

Bonjour,

Tout d'abord, nous utilisons cette syntaxe-ci maintenant :

Code :

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

<script type="text/javascript">

Ensuite, lors du chargement de la page, est-ce que le formulaire est déjà pré-rempli ? Sinon, c'est normal que votre fonctionne ne soumette pas le formulaire vu que vous faites la vérification dès le début, c'est-à-dire quand les champs sont tous vides.

**legrandse** · 09/06/2011, 12h44

Hello,

J'ai fait le changement de la balise script. Merci.

Et effectivement les champs ne sont pas remplis au chargement de la page.

Serait-il possible de me dire ce que je dois faire avec ma fonction pour que cela fonctionne/marche

Merci beaucoup.

**okoweb** · 09/06/2011, 13h00

Ca devrait aller.

Code :

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

1
2
 
<input type="" name="" id="reg" onblur ="submitForm();" />

**legrandse** · 09/06/2011, 14h03

J'ai modifié comme il se devait càd comme ceci

Code :

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

<input type="text" class="dataText"  align="left" onblur ="submitForm();" id="natNumberField" name="reg">

Mais dès que le script à chargé les données de la carte dans les différents champs, le formulaire ne se valide pas automatiquement.

Je vois tjrs pas comment faire.

**javatwister** · 09/06/2011, 14h04

il faut sortir du champ...

**tigunn** · 09/06/2011, 14h15

Salut,
bon déjà , si je comprend bien

, tu n'a pas a envoyé ton formulaire au chargement de la page, donc pas d'appel à submitForm() dans body.onload.
Ensuite, tu as d'autres formulaire dans ta page, si oui cela peut être un conflit; essaye de mettre un alert('coucou') dans ta fonction javascript pour voir si et quant elle s'execute.

**legrandse** · 09/06/2011, 14h21

Envoyé par javatwister

il faut sortir du champ...

Effectivement çà fonctionne quand on sort du champs.

Ce que j'aurais souhaité c'est une opération vraiment automatique.

J'espère qu'une fonction existe pour cela ?

**andry.aime** · 09/06/2011, 14h37

Envoyé par legrandse

Ce que j'aurais souhaité c'est une opération vraiment automatique.

Tu veux dire que une fois la page chargé, le formulaire doit être envoyé? --> onload du body.

Ou bien tu regardes simplement le formulaire et il se submit au moment où tu veux --> boule de cirstal.

A quel moment veux-tu que ton formulaire se submit?
PS: Regarde l'évènement correspondant.

A+.

**legrandse** · 09/06/2011, 14h46

Pour te mettre en situation, la personne introduit la carte dans le lecteur, appuye sur enter pour lancer la lecture et dès que les champs sont remplis le script envoie les données dans la base.

Je ne sais pas si çà répond à ta question?

**tigunn** · 10/06/2011, 11h56

~~Donc tu dois appeler ta fonction dans le onload() pour qu'elle s'effectue après le chargement de la page. Pas la peine de la faire dans le onblur() de l'input reg.~~
Après relecture de ton dernier message: le bouton "entrer" est sur la même page? Si il affiche les données dans le formulaire pourquoi ne pas faire l'insert à ce moment là et garder le formulaire pour l'affichage uniquement. (avec éventuellement une action update si tu modifies des champs).

**okoweb** · 10/06/2011, 11h58

Il faut lancer function submitForm() après l'exécution de la function qui charge le formulaire ou après l'exécution de toutes les instructions de cette fonction. ex

Code :

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

1
2
3
4
5
6
7
8
 
function charge_form(){
//code de la function
//....
 
//A la fin de toutes les instructions...
submitForm();
}

Maintenant reste à toi de voir à quel moment lancer charge_form()....

**legrandse** · 10/06/2011, 14h30

Merci pour vos différentes réponses.

Après avoir lu les différents choix, onblur, onchange, ...
je ne comprend pas pourquoi le onchange ne fonctionne pas car le champ part d'une valeur vide à remplie mais le script ne se joue pas.

Si quelqu'un peut essayer de voir dans le script complet ce serait super.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<?php
session_start();
?>
 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
	<title>GGHF encodage randonée</title>
 
	<meta http-equiv="Content-type" content="text/html;charset=iso-8859-15" />
    <link rel="stylesheet" href="style.css" type="text/css">
 
<script type="text/javascript" src="be_belgium_eid.js"></script>
<script type="text/javascript">
 
var cardReader = new be.belgium.eid.CardReader();
 
function noCardPresentHandler() {
	window.alert("No card present!");
}
cardReader.setNoCardPresentHandler(noCardPresentHandler);
 
function noReaderDetectedHandler() {
	window.alert("No reader detected!");
}
cardReader.setNoReaderDetectedHandler(noReaderDetectedHandler);
 
function appletNotFoundHandler() {
	window.alert("Applet not found!");
}
cardReader.setAppletNotFoundHandler(appletNotFoundHandler);
 
function appletExceptionHandler(e) {
	window.alert("Erreur lecture carte!\r\nException: " + e + "\r\nRéessayez svp.");
}
cardReader.setAppletExceptionHandler(appletExceptionHandler);
 
function readCard() {
	document.getElementById("nameField").value = "Attendez svp ...";
	var dateFormatter = new be.belgium.eid.DateFormatter(be.belgium.eid.dateFormat.DD_MM_YYYY);
	var card = cardReader.read();
	if (card != null) {
 
document.getElementById("nameField").value = card.getSurname();
document.getElementById("firstNamesField").value = card.getFirstName1();
document.getElementById("streetField").value = card.getStreet();
document.getElementById("municField").value = card.getZipCode() + " " + card.getMunicipality();
document.getElementById("countryField").value = card.getCountry();
document.getElementById("natNumberField").value = card.getNationalNumber();
document.getElementById("birthdateField").value = dateFormatter.format(card.getBirthDate());
	} else {
		document.getElementById("content").value = "No card returned.";
	}
}
 
</script>
 
 <script type="text/javascript">
function focus()
  {
  document.getElementById('send').focus()
  }
</script>
 
 
 
 
 
<script type="text/javascript">
function valider_formulaire(thisForm){
 if(thisForm.old_id.value != ''){
 
return true;
}
else if(thisForm.nameField.value == ''){
 
         alert('Les champs ne sont pas remplis');
 
         thisForm.send.focus();
 
         return false;
    }
if(thisForm.firstNamesField.value == '') { 
alert('Vous devez indiquer votre prenom'); 
thisForm.send.focus(); 
return false; 
} 
if(thisForm.streetField.value == '') { 
alert('Vous devez indiquer la rue'); 
thisForm.send.focus(); 
return false; 
} 
 
if(thisForm.municField.value == '') { 
alert('Vous devez indiquer le code postal'); 
thisForm.send.focus(); 
return false; 
} 
 
if(thisForm.birthdateField.value == '') { 
alert('Vous devez indiquer la date de naissance'); 
thisForm.send.focus(); 
return false; 
} 	
 
else {
    return true;
}}
</SCRIPT>
 
 
 
<script type="text/javascript">
function submitForm(){
    var champs = document.getElementById('natNumberField');
    if(champs.value != ''){
		var form = document.getElementById('formu');
		form.submit();
	}
}
</script>
 
 
 
</head>
 
<body onLoad = "focus();"  >
 
 
    <div id="eid">
 
<form name="formulaire" id="formu" method="post" onSubmit="return valider_formulaire(this)"  action="connect.php">
 <?php
if(!empty($_POST))
   {
             $_SESSION['rando'] = $_POST;
             
   }
$rand = trim($_SESSION['rando']['rando']);
 
?>
<p></p>
<font face="arial">Sélection automatique de la rando de:</font>
<font color="red" face="arial" size="+1"> <?php echo $rand ?></font> <br />   
<INPUT TYPE="hidden" NAME="rando" value="<?php echo $rand ?> ">	
<input type="button" onClick="javascript:readCard()" id="send" value="" title="Read Card" style="height:15px; width:15px ; background-color:#0C0 ; float:right"/>
 
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%">
	<tr>
	<td>
	  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="fontName">
	  <tr class="tableDarkShadow">
	    <td class="labelText" valign="top" align="center">LECTURE DES DONNEES DE LA CARTE eID</td>
	   </tr>
	  </table>
	 </td>
	</tr>
 
	<tr>
	 <td>
	<!-- -->
	<script type="text/javascript" language="javascript">
 
	//----------------
	// CHARGEMENT DES APPLET POUR LE FONCTIONNEMENT DU FORMULAIRE
	// give the following variables:
	// subdir: the subdirectory where the applet jar file resides
	// jnlpPath: the path to the jnlp file
	// ex: subdir="appletDir";
	// jnlpPath=subdir;
	//----------------
	var subdir="";
	var jnlpPath=subdir;
 
	//----------------
	// - get the href of this page
	// - strip off the name of this page
	//----------------
	var myloc  = window.location.href;
	var locarray = myloc.split("/");
	delete locarray[(locarray.length-1)];
	var url = locarray.join("/");
 
	document.writeln('<applet code="org.jdesktop.applet.util.JNLPAppletLauncher"');
	document.writeln('codebase = "' + url + subdir + '"');
	document.writeln('width ="1"');
	document.writeln('height ="1"');
	document.writeln('name = "BEIDAppletLauncher"');
	document.writeln('id = "BEIDAppletLauncher"');
	document.writeln('archive="applet-launcher.jar,beid35libJava.jar,BEID_Applet.jar">');
 
	document.writeln('<param name="codebase_lookup" value="false">');
	document.writeln('<param name="subapplet.classname" value="be.belgium.beid.BEID_Applet">');
	document.writeln('<param name="progressbar" value="false">');
	document.writeln('<param name="jnlpNumExtensions" value="1">');
	document.writeln('<param name="jnlpExtension1" value= "' + url + jnlpPath + '/beid.jnlp">');
	document.writeln('<param name="jnlp_href" value="' + url + jnlpPath + '/beid.jnlp">');
 
	document.writeln('<param name="debug" value="false"/>');
	document.writeln('<param name="Reader" value=""/>');
	document.writeln('<param name="OCSP" value="-1"/>');
	document.writeln('<param name="CRL" value="-1"/>');
	document.writeln('</applet>');
 
	</script>
 
 
 
 
    </td>
	</tr>
 
 
   <tr>
	  <td valign="top">
      <table style="width:100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td>
 
      	<table border="0" cellspacing="0" cellpadding="0">
          	<tr class="backgroundPanel">
	       	<td class="labelText" align="right" style="width:150px ; font-size:10px">Nom : </td>
	       	<td> <input type="text" class="dataText" align="left" id="nameField" name="nom" ><font color="#FF0000">*</font></td>
          </tr>
	      <tr class="backgroundRoundedPanel">
	       <td class="labelText" align="right" style="width:150px ; font-size:10px">Prénom :</td>
	       <td> <input type="text" class="dataText" align="left" id="firstNamesField"  name="prenom"><font color="#FF0000">*</font></td>
	      </tr>
 
	      <tr class="backgroundPanel">
	       <td class="labelText" align="right" style="width:150px ; font-size:10px"" nowrap="nowrap">Adresse : </td>
	       <td > <input type="text" class="dataText" align="left" id="streetField" name="rue"><font color="#FF0000">*</font></td>
	      </tr>
	      <tr class="backgroundRoundedPanel">
	       <td class="labelText" align="right" style="width:150px ; font-size:10px"" nowrap="nowrap">Code postal : </td>
	       <td> <input type="text" class="dataText" align="left" id="municField" name="postal"><font color="#FF0000">*</font></td>
	      </tr>
          <tr class="backgroundPanel">
	       <td class="labelText" align="right" style="width:150px ; font-size:10px"" nowrap="nowrap">Date de naissance : </td>
	       <td > <input type="text" class="dataText" align="left" id="birthdateField" name="date"><font color="#FF0000">*</font></td>
          </tr>
	      <tr class="backgroundRoundedPanel">
	       <td class="labelText" align="right" style="width:150px ; font-size:10px"" nowrap="nowrap">Pays : </td>
	       <td> <input type="text" class="dataText" align="left" id="countryField" name="pays"></td>
           </tr>
          <tr class="backgroundPanel">
	    	<td class="labelText" align="right" style="width:150px ; font-size:10px"">N° registre national : </td>
	    	<td> <input type="text" class="dataText" onchange="submitForm();" value=" " align="left" id="natNumberField" name="reg"></td>
	      </tr>
      </td>
 
	  </tr>
 
	  </table>
 
      </td>
      <td>	
 <input type="hidden" id="content"/>                
<p></p>
 
	<input type="submit" value="Valider les données" style="height:50px; width:138px"/>
<p></p>
         Utiliser un chronocode: <br/>
             <input type="texte" name="old_id" title="Scanner entre 0 et 5cm du chronocode" id="old_id" style="width:150px ; height:50px ; text-align:right"/>
 
         </form>
      </td> 
      </table>
 
</table>
 
      <font color="#FF0000">*</font> requis si complété manuellement
 
</div>
 
<div id="search">
<?php
include ("search.php");
?>
</div>
 
 
<div id="affichage">
<iframe name="ifr" width="260" height="350"  style="font:Arial, Helvetica, sans-serif" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" src="affichage.php"></iframe>
</div>
 
<div id="titreaffichage">
Participants actuels &agrave; la rando:
 
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80px"><font size="2">NOM</font></td>
<td width="80px"><font size="2">PRENOM</font></td>
</tr>
</table>
</div>
<div id="upload">
 
 
<form name="formulaire" method="post" action="dbsync/verifconnect2.php">
<input type="submit" value="Clôture de session"  style=" background:red ;height:40px; width:168px"/>
</form>
Vérifier qu'une connexion internet est lancée
</div>
 
<body>
</html>

**andry.aime** · 10/06/2011, 14h46

Envoyé par legrandse

Merci pour vos différentes réponses.

Après avoir lu les différents choix, onblur, onchange, ...
je ne comprend pas pourquoi le onchange ne fonctionne pas car le champ part d'une valeur vide à remplie mais le script ne se joue pas.

la fonction dans onchange ne s’exécute qui si tu as modifié le champs puis tu le quitte sauf pour le select qui dès que tu sélectionnes, la fonction est appelé.
Sinon, ta demande est vraiment bizar, submiter un formulaire avec les valeurs des champs de saisie sans la validation de l'utilisateur

.

A+.

**legrandse** · 10/06/2011, 15h01

Je pensais que c'était plus courant que cela en fait.

Il ne faut pas perdre de vue que le script récupère les données de la carte d'identité électronique et de ce fait l'opérateur n'a rien à modifier aux champs.

Il ne va pas commencer à modifier le nom ou prénom de la personne.

D'où ma demande...

Une alternative c'était d'avoir une barre de progression de la lecture et quand elle arrive à 100% la validation automatique se fait mais là je m'engage dans beaucoup trop compliqué pour moi

**javatwister** · 11/06/2011, 07h14

timer indispensable...

Validation automatique d'un formulaire

JavaScript

Discussions similaires

Partager

Partager