Appel d'une fonction contrôlant la date - HTML/CSS - Programmation
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> |
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ù.
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})$" ); |
Marsh Posté le 16-04-2010 à 10:26:33
olivthill a écrit :
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. |
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 ?
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.
Marsh Posté le 16-04-2010 à 11:08:55
olivthill a écrit : On peut ajouter
avant chaque Return false;. |
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 !!!
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.
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