Appel d'une fonction contrôlant la date

Appel d'une fonction contrôlant la date - HTML/CSS - Programmation

Marsh Posté le 16-04-2010 à 08:45:20    

Bonjour,
 
Sur mon site, les participants doivent reporter des données pour un jour particulier. Il est donc impératif que la date qu'ils saisissent soit dans un format correct (jj-mm-aaaa). Je veux installer un javascript qui contrôle cette date à la saisie. J'ai découvert celui-ci qui semble correspondre à mes attentes :
 
   <script type="text/javascript"><!--
    function isDate(d) {
    // Cette fonction permet de vérifier la validité d'une date au format jj-mm-aa ou jj-mm-aaaa
     
    if (d == "" ) // si la variable est vide on retourne faux
    return false;
     
    e = new RegExp("^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$" );
     
    if (!e.test(d)) // On teste l'expression régulière pour valider la forme de la date
    return false; // Si pas bon, retourne faux
     
    // On sépare la date en 3 variables pour vérification, parseInt() converti du texte en entier
    j = parseInt(d.split("-" )[0], 10); // jour
    m = parseInt(d.split("-" )[1], 10); // mois
    a = parseInt(d.split("-" )[2], 10); // année
     
    // Si l'année n'est composée que de 2 chiffres on complète automatiquement
    if (a < 1000) {
    if (a < 89) a+=2000; // Si a < 89 alors on ajoute 2000 sinon on ajoute 1900
    else a+=1900;
    }
     
    // Définition du dernier jour de février
    // Année bissextile si annnée divisible par 4 et que ce n'est pas un siècle, ou bien si divisible par 400
    if (a%4 == 0 && a%100 !=0 || a%400 == 0) fev = 29;
    else fev = 28;
     
    // Nombre de jours pour chaque mois
    nbJours = new Array(31,fev,31,30,31,30,31,31,30,31,30,31);
     
    // Enfin, retourne vrai si le jour est bien entre 1 et le bon nombre de jours, idem pour les mois, sinon retourn faux
    return ( m >= 1 && m <=12 && j >= 1 && j <= nbJours[m-1] );
    }
    //-->
    </script>

 
Mon problème est que je n'arrive pas à appeler cette fonction dans "input". J'ai bien essayé le code suivant mais sans succès :
 
<input name="date_calendrier" id="date_calendrier" type="text" value="<? echo $_SESSION['jour_affichage']; ?>" size="10" onChange="isDate('date_calendrier');">
 
Quelqu'un saurait-il m'aider ?
 
D'avance merci.


Message édité par alexmeteo le 18-04-2010 à 09:07:16
Reply

Marsh Posté le 16-04-2010 à 08:45:20   

Reply

Marsh Posté le 16-04-2010 à 09:47:07    

1. La fonction attend une chaine contenant une date, et on lui donne une chaine contenant le nom d'un champ.
 
2. L'expression régulière teste les "/", mais plus loin, on a une séparation qui se base sur les "-".
 
3. Il manque les messages d'alerte aux utilisateurs.
 
Voici une solution que j'ai testée :

<html>
<head>
  <script type="text/javascript"><!--  
    function isDate(field_date) {  
    // Cette fonction permet de vérifier la validité d'une date au format jj-mm-aa ou jj-mm-aaaa  
     
    var d = field_date.value;
    if (d == "" ) { // si la variable est vide on retourne faux  
       alert("Date invalide (champ vide)" );
       return false;  
    }  
    e = new RegExp("^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$" );  
     
    if (!e.test(d)) { // On teste l'expression régulière pour valider la forme de la date  
       alert("Date invalide (pb chiffre)" );
       return false; // Si pas bon, retourne faux  
    }
     
    // On sépare la date en 3 variables pour vérification, parseInt() converti du texte en entier  
    j = parseInt(d.split("/" )[0], 10); // jour  
    m = parseInt(d.split("/" )[1], 10); // mois  
    a = parseInt(d.split("/" )[2], 10); // année  
     
    // Si l'année n'est composée que de 2 chiffres on complète automatiquement  
    if (a < 1000) {  
    if (a < 89) a+=2000; // Si a < 89 alors on ajoute 2000 sinon on ajoute 1900  
    else a+=1900;  
    }  
     
    // Définition du dernier jour de février  
    // Année bissextile si annnée divisible par 4 et que ce n'est pas un siècle, ou bien si divisible par 400  
    if (a%4 == 0 && a%100 !=0 || a%400 == 0) fev = 29;  
    else fev = 28;  
     
    // Nombre de jours pour chaque mois  
    nbJours = new Array(31,fev,31,30,31,30,31,31,30,31,30,31);  
     
    // Enfin, retourne vrai si le jour est bien entre 1 et le bon nombre de jours, idem pour les mois, sinon retourn faux
    if ( m >= 1 && m <=12 && j >= 1 && j <= nbJours[m-1] )
       return true;  
 
    // Sinon, la date n'est pas bonne
    alert("Date invalide (nombres hors limites)" );
    return false;  
    }  
    //-->  
    </script>  
</head>
<body>
<form>
Date (jj/mm/aaaa) : <input name="date_calendrier" id="date_calendrier" type="text" value="" size="10" onChange="javascript:isDate(this);">  
<input type=button value="Ok">
</form>
</body>
</html>

Reply

Marsh Posté le 16-04-2010 à 09:58:20    

Je vais tester ça, mais mes séparateurs sont des "-" et non des "/". Je croyais avoir tout remplacé du script original, mais d'après ce que vous dites il en restait. Je ne vois pas où.

Reply

Marsh Posté le 16-04-2010 à 10:17:28    

Citation :

e = new RegExp("^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$" );

Cette ligne teste s'il y a 1 ou 2 chiffres, puis un "/", puis 1 ou 2 chiffres, puis un "/" puis 2 ou 4 chiffres.
 
Le "/" ne se voit pas bien parce qu'il est échappé avec un "\".
 
Pour des "-", il faudrait avoir :

e = new RegExp("^[0-9]{1,2}\-[0-9]{1,2}\-([0-9]{2}|[0-9]{4})$" );

Message cité 1 fois
Message édité par olivthill le 16-04-2010 à 10:22:42
Reply

Marsh Posté le 16-04-2010 à 10:26:33    

olivthill a écrit :

Citation :

e = new RegExp("^[0-9]{1,2}\/[0-9]{1,2}\/([0-9]{2}|[0-9]{4})$" );

Cette ligne teste s'il y a 1 ou 2 chiffres, puis un "/", puis 1 ou 2 chiffres, puis un "/" puis 2 ou 4 chiffres.
 
Le "/" ne se voit pas bien parce qu'il est échappé avec un "\".


 
Merci, j'ai remplacé par : e = new RegExp("^[0-9]{1,2}\-[0-9]{1,2}\-([0-9]{2}|[0-9]{4})$" );  
 
Ça fonctionne au niveau des messages d'alerte, MAIS ça ne bloque pas. C'est à dire que même si la date est dans un mauvais format ou carrément absente, en cliquant sur le bouton "submit" on franchit tout de même l'étape et on accède à la page suivant. Dans ce cas faut-il mettre une condition sur le bouton ou existe-t-il un autre moyen pour bloquer l'accès tant que la date n'est pas dans un format correct ?


Message édité par alexmeteo le 16-04-2010 à 10:27:41
Reply

Marsh Posté le 16-04-2010 à 10:50:31    

On peut ajouter

 field_date.focus();

avant chaque Return false;.
Et utiliser OnBlur au lieu de OnChange dans le Input.

Message cité 1 fois
Message édité par olivthill le 16-04-2010 à 10:51:10
Reply

Marsh Posté le 16-04-2010 à 11:08:55    

olivthill a écrit :

On peut ajouter

 field_date.focus();

avant chaque Return false;.
Et utiliser OnBlur au lieu de OnChange dans le Input.


 
J'ai donc ceci :
 
<script type="text/javascript"><!--  
    function isDate(field_date) {  
    // Cette fonction permet de vérifier la validité d'une date au format jj-mm-aa ou jj-mm-aaaa  
     
    var d = field_date.value;
    if (d == "" ) { // si la variable est vide on retourne faux  
       alert("Date invalide (champ vide)" );
    field_date.focus();
       return false;  
    }  
    e = new RegExp("^[0-9]{1,2}\-[0-9]{1,2}\-([0-9]{2}|[0-9]{4})$" );  
     
    if (!e.test(d)) { // On teste l'expression régulière pour valider la forme de la date  
       alert("Date invalide (pb chiffre)" );
    field_date.focus();
       return false; // Si pas bon, retourne faux  
    }
     
    // On sépare la date en 3 variables pour vérification, parseInt() converti du texte en entier  
    j = parseInt(d.split("-" )[0], 10); // jour  
    m = parseInt(d.split("-" )[1], 10); // mois  
    a = parseInt(d.split("-" )[2], 10); // année  
     
    // Si l'année n'est composée que de 2 chiffres on complète automatiquement  
    if (a < 1000) {  
    if (a < 89) a+=2000; // Si a < 89 alors on ajoute 2000 sinon on ajoute 1900  
    else a+=1900;  
    }  
     
    // Définition du dernier jour de février  
    // Année bissextile si annnée divisible par 4 et que ce n'est pas un siècle, ou bien si divisible par 400  
    if (a%4 == 0 && a%100 !=0 || a%400 == 0) fev = 29;  
    else fev = 28;  
     
    // Nombre de jours pour chaque mois  
    nbJours = new Array(31,fev,31,30,31,30,31,31,30,31,30,31);  
     
    // Enfin, retourne vrai si le jour est bien entre 1 et le bon nombre de jours, idem pour les mois, sinon retourn faux
    if ( m >= 1 && m <=12 && j >= 1 && j <= nbJours[m-1] )
       return true;  
 
    // Sinon, la date n'est pas bonne
    alert("Date invalide (nombres hors limites)" );
 field_date.focus();
    return false;  
    }  
    //-->  
    </script>

 
et  
 
<input name="date_calendrier" id="date_calendrier" type="text" value="<? echo $_SESSION['jour_affichage']; ?>" size="10" class="texteselect_1024" onBlur="javascript:isDate(this);">
 
Ça fonctionne très bien quand rien n'est saisi dans le champ, on est bloqué, par contre si j'inscris des valeurs de dates "erronées", j'ai le message d'alerte mais je parviens à passer tout de même.
Dans tous les cas merci pour la peine que vous prenez !!!

Reply

Marsh Posté le 16-04-2010 à 12:02:47    

Après de multiples tests, bizarrement il s'avère que ça fonctionne bien sous IE8 et qu'on réussisse à passer sous FF3. Je n'ai pas d'autres navigateurs pour tester.

Reply

Marsh Posté le 17-04-2010 à 15:37:44    

Personne n'a d'idée pour corriger ça sous FF3 ?  :-(

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed