Dernière mise à jour :2008-09-19

informatique

JavaScript - Gestion de dates dans les formulaires web

Dans le monde du web, l'un des moyen les plus populaire pour obtenir de l'information à propos d'un utilisateur est l'utilisation de formulaires. Parfois il s'avère utile d'obtenir une information précise. Dans un tel cas, il devient donc important d'exercer une certaine forme de validation sur les entrées de l'utilisateur. Cet atelié propose de montrer un exemple de validation des entrées de date dans un formulaire.

Le langage choisit pour exercer les validations sur des formulaires étant pratiquement toujours le javascript puisque celui-ci est bien interprété par Netscape et Internet explorer, j'ai choisit ce langage pour la démonstration.

La page web exemple de cet atelier utilise trois boites de sélection. La première propose une liste de nombre comprise entre 1 et 31 et représente le choix des jours. La seconde contient les noms des mois de l'année et la dernière contient les choix des années 2001 à 2009. Pourquoi arrèter le choix à 2009. Simplement parce que je pense sinserrement que cette technique ne sera plus utilisée à cette époque.

Voici le code ci-dessous et suivant celui-ci, une courte description.

Listing 1.0 Exemple de gestion de dates dans un formulaire
1. <HTML>
2. <HEAD>
3. <TITLE>A525G</TITLE>
4. 
5. <script language="javascript">
6. <!--
7. function verifier_date(strJour, strMois, strAn)
8. {
9. //Vérifier si le mois comporte 31 jours
10.  if (((strMois == "04") || (strMois == "06") || (strMois == "09") || (strMois == "11")) && (eval(strJour) > 30))
11.  {
12.   alert("Il n'y a pas 31 jours dans le mois que vous avez sélectionné.");
13.   return false;
14.  }
15. 
16. //Vérification dans le cas du mois de février
17.   if ((strMois == "02") && (eval(strJour) > 28))
18.   {
19.   if (eval(strAn)%4 == 0)
20.   {
21.    if (eval(strJour) > 29)
22.    {
23.     alert("S.V.P. choisir un jour plus petit que 30 si vous avez choisi le mois de février dans la première date entrée.");
24.     return false;
25.    }
26.   }
27.   else
28.   {
29.    alert("S.V.P. choisir un jour plus petit que 29 si vous avez choisi le mois de février dans la première date entrée.");
30.    return false;
31.   }
32.  }
33.  return true;
34. }
35. 
36. function formulaire_onSubmit(formulaire)
37. {
38.  var strJour = formulaire.selectJour[formulaire.selectJour.selectedIndex].value;
39.  var strMois = formulaire.selectMois[formulaire.selectMois.selectedIndex].value;
40.  var strAn = formulaire.selectAn[formulaire.selectAn.selectedIndex].value;
41. 
42.  if (verifier_date(strJour, strMois, strAn))
43.  {
44.   alert("La date est ok.");
45.   return true;
46.  }
47.  else<br>
48.  {
49.   alert("Mauvaise date.");
50.   return false;
51.  }
52. }
53. // -->
54. </script>
55. 
56. </HEAD>
57. <BODY>
58. <form onsubmit="return formulaire_onSubmit(this)">
59. <table>
60. 
61. <tr>
62.  <td valing="top">Jour: <br>
63. 
Listing 1.0 (suite)
64.  <select name="selectJour" size="1">
65.   <option value="01" selected>1</option>
66.   <option value="02">2</option>
67.   <option value="03">3</option>
68.   <option value="04">4</option>
69.   <option value="05">5</option>
70.   <option value="06">6</option>
71.   <option value="07">7</option>
72.   <option value="08">8</option>
73.   <option value="09">9</option>
74.   <option value="10">10</option>
75.   <option value="11">11</option>
76.   <option value="12">12</option>
77.   <option value="13">13</option>
78.   <option value="14">14</option>
79.   <option value="15">15</option>
80.   <option value="16">16</option>
81.   <option value="17">17</option>
82.   <option value="18">18</option>
83.   <option value="19">19</option>
84.   <option value="20">20</option>
85.   <option value="21">21</option>
86.   <option value="22">22</option>
87.   <option value="23">23</option>
88.   <option value="24">24</option>
89.   <option value="25">25</option>
90.   <option value="26">26</option>
91.   <option value="27">27</option>
92.   <option value="28">28</option>
93.   <option value="29">29</option>
94.   <option value="30">30</option>
95.   <option value="31">31</option>
96. 
97. </select>
98. </td>
99. <td>Mois: <br>
100. 
101. <select name="selectMois" size="1">
102.   <option value="01" selected>Janvier</option>
103.   <option value="02">Février</option>
104.   <option value="03">Mars</option>
105.   <option value="04">Avril</option>
106.   <option value="05">Mai</option>
107.   <option value="06">Juin</option>
108.   <option value="07">Juillet</option>
109.   <option value="08">Août</option>
110.   <option value="09">Septembre</option>
111.   <option value="10">Octobre</option>
112.   <option value="11">Novembre</option>
113.   <option value="12">Décembre</option>
114. </select>
115. </td>
116. <td>Année: <br>
117. 
118. <select name="selectAn" size="1">
119.   <option value="2001" selected>2001</option>
120.   <option value="2002" >2002</option>
121.   <option value="2003" >2003</option>
122.   <option value="2004" >2004</option>
123.   <option value="2005" >2005</option>
124.   <option value="2006" >2006</option>
125.   <option value="2007" >2007</option>
126.   <option value="2008" >2008</option>
127.   <option value="2009" >2009</option>
128. </select>
129. </td>
130. </tr>
131. <tr>
132. <td colspan="3">
133. <input type="submit" value="ok" id=submit1 name=submit1>
134. </td>
135. </tr>
136. </table>
137. </form>
138. </BODY>
139. </HTML>

Détail du listing

Le formulaire est défini entre les lignes 58 et 137. La validation se produit lorsque l'événement 'onsubmit' est déclenché à la soumission du formulaire. Durant l'exécution de cet événement, la fonction 'formulaire_onSubmit' (ligne 36) est appelée. Cette fonction prend un argument en entré nommé 'formulaire'. Cet argument est l'objet représentant le formulaire. Entre les lignes 38 à 40 sont créé 3 variables. Chacune de celles-ci est voué à contenir la valeur d'une des boites de sélection qui représentent (tel que cité ci-haut) les jours, mois et années. À partir de ces trois valeurs, la fonction apelle la fonction verifier_date (ligne 7) en lui passant les valeurs des trois variables strJour, strMois et strAn. Cette fonction vérifit en premier lieu (lignes 10 à 14) si le mois choisit correspond à un mois de 30 jours et si le jour choisit est 30 ou moins. Le second bloc d'instruction de la fonction sert à vérifier les erreurs pouvant subvenir lors de la sélection du mois de février. Si la fonction ne trouve aucune erreur, elle retourne la valeur 'true' sinon elle retourne false. Donc, la réponse donnée par la fonction dans cette exemple est évalué à la ligne 42 et dépendant de cette valeur, la fonction affiche un message indiquant si oui ou non la date est bonne.

Si vous désirez visionner l'exemple, cliquez ici

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2001-09-17

Aucun commentaire pour l'instant.