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