Discussion :

[Papy214]

Bonjour,

Je voudrais valider "en live" la validité de la saisie d'une dqate dans un input text. Je cherche donc une expression régulière pour faire ça à chaque onkeypress. Mais .... (sinon, ça serait trop facile ) ... je voudrais que la validité soir reconnue quelle que soit la longueur de la saisie. Plus en détails:

1 chiffre = valide
2 chiffres = valide
3 chiffres = invalide
1 chiffres et un / = valide
2 chiffres et un / = valide
etc ....

sur un format final JJ/MM/AAAA

Est-ce que cela vous parait possible avec une expression régulière ?

à défaut, je ferai 10 cas avec une regex pour chaque longueur possible de texte saisi.

Papy !

[Bovino]

Salut.

Code :

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

var exp = /^[\0-3](?:[\d](?:[\/](?:[\01](?:[\d](?:[\/](?:[\d](?:[\d](?:[\d](?:[\d])?)?)?)?)?)?)?)?)?$/;

serait une première approche. Mais, ça impose un jour entre 01 et 39, un mois entre 01 et 19 et une année aléatoire sur 4 chiffres.

Selon moi, une meilleure solution serait de faire un split sur le caractère "/" puis de tester les éventuelles valeurs en fonction des rangs, par exemple :

Code :

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

1
2
3
4
5
6
function tester(date){
    var tabVals = date.split('/');
    if(+tabVals[0]>31){return false;}
    if(tabVals[1] && +tabVals[1]>12){return false;}
    if(tabVals[2] && +tabVals[2]>2020){return false;}
}

[SpaceFrog]

Désolé de venir faire le trouble fête, surtout quand il s'agit de regexp

Pour moi il ne faut pas utiliser une regexp pour verifier une date !!
La regexp peut vérifier le format, mais en aucun cas l'exactitude de la date !
exemple: 31/01/2010
quoi qu'à la limite ça pourrait se traiter avec une expression monstrueuse, mais en aucun cas tu ne pourras gérer les années bissextiles ou non.

Par contre il doit y avoir dans la FAQ ou les contribution un vrai script js de vérification de date ...
http://javascript.developpez.com/faq...erifFormatDate

On pourra y modifier le séparateur - en / ...

[Papy214]

Moi, ce que je cherche à faire, c'est vérifier la "validité" à chaque frappe de touche. Par exemple, si l'utilisateur a déjà tapé 2 chiffres, limiter la saisie au / .
Un peu comme un maskedit qui guide la saisie.

Sinon, oui, à la sortie de l'input, je peux tester facilement si la date est bonne ou pas.

Dans le contexte, je ne cherche qu'à ""forcer"" l'utilisateur à saisir 1 ou 2 chiffres suivis d'un / suivi d'1 ou 2 chiffres suivis d'1 / suivi de 4 chiffres, et ce , à chaque frappe de touche. Je peux à la limite forcer un format complet JJ/MM/AAAA. La vérification de la validité de la date saisie se faisant après coup, dans le submit de mon formulaire. Si un utilisateur a saisi 59/75/0000, lors de la frappe, ça reste valide. Mais après, au submit, je check la date pour voir si elle correspond à quelque chose de correct.

Je pensais à une expression régulière, pensant que ça m'éviterait dans le onkeypress de faire un truc du genre:
si 1 seul caractère dans l'input, vérifier que c'est un chiffre
si 2 caractères, vérifier que c'est un chiffre ou un /
si 3 caractères, etc....
Mais une regex n'est peut-être aps la meilleure façon de faire .

Bovino: peut-être que ta fonction tester(date) le permet, parce que je ne comprends pas la syntaxe employée avec le + devant le tableau. pourrais-tu me donner des précisions stp ?

SpaceFrog: Là aussi, tel que je le vois, ça ne permet que la validation en sortie de l'input, non ?

[javatwister]

dac avec la grenouille: pas de regexp pour une date;

l'idée pour ce genre de script est de viser la simplicité: le fait d'imposer des "/" dans la saisie ne l'est pas, par exemple!

essaie ceci:

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
<p style="margin-top:50px">
Saisissez une date de la forme <span>aaaa-mm-jj</span>
</p>
 
 
<form id="quand" action="">
	<p>
		<input name="a" type="text" size="1" maxlength="4" /> 
		<input name="m" type="text" size="1" maxlength="2" /> 
		<input name="j" type="text" size="1" maxlength="2" /> 
		<input type="button" value="ok" onclick="verif(f['a'].value,f['m'].value,f['j'].value)" /> 
	</p>
</form>
 
<script type="text/javascript">
 
var f=document.forms["quand"].elements;
 
function verif(a,m,j){ 
	m-=1;
	d=new Date(a,m,j);
	var rep= (d.getFullYear()!=a || d.getMonth()!=m) ? "date invalide" : "date valide";
	alert(rep); 
 
} 
 
</script>

[SpaceFrog]

sinon le plus simple, et j'ai déjà du poste un script de ce genre est d'accoler 3 inputs ...
il sera plus facile ensuite de tester sur le onblur ou basculer les valeurs dans un input hidden

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
<style type="text/css">
.deux {
	width:20px;
	}
.four {
	width: 40px;
	}
 
.date { border:solid 0;}
#contour {
	border: inset 2px	 snow;
	display:inline;
	width:auto;
	}
</style>
</head>
<body>
<fieldset id="contour">
<input type='text' id="jour" value="" maxLength="2" class="date deux" />/<input type='text' id="mois" value="" maxLength="2" class="date deux" />/<input type='text' id="an" value="" maxLength="4" class="date four" />
</fieldset>
</body>
</html>

[Papy214]

l'idée des 3 input est pas mal en y ajoutant un passage automatique entre les input dès que la longueur max est atteinte. Je vais étudier toutes ces pistes.

Merci à tous !

Finalement, j'ai pris cette solution. Merci !