Les dates doivent toujours faire l'objet d'un traitement particulier en programmation.
Dans un formulaire Web, la validation d'une date en JavaScript est légèrement différente de celle réalisée pour valider une chaîne dans un input type="text".
Prenons par exemple ce formulaire qui permet de saisir une date.
<div class="ligne-formulaire">
<label for="limite">Date limite :</label>
<input type="datetime-local" name="limite" id="limite">
<p class="message-erreur-formulaire"></p>
</div>
Pour valider la date entrée, il faut d'abord retrouver la case de saisie.
let limite = document.getElementById('limite');
if (limite != null) {
limite.onblur = validerLimite;
}
Cette fonction permettra de valider la date.
/**
* Valide la date limite et affiche le message d'erreur dans le DOM si non valide.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @return {bool} True si valide.
*/
function validerLimite() {
let valide = false;
let messageErreur = '';
if (limite != null) {
let valeur = limite.value; // retournera "" si date invalide dans un input datetime-local mais si l'usager a modifié le HTML, retournera le texte entré sans le valider.
if (valeur === "") {
limite.value = ""; // si la valeur était à blanc à cause d'une date invalide, ça doit se refléter dans le formulaire.
valide = true; // dans ce formulaire, la date limite n'est pas une information obligatoire.
}
else {
const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/; // un <input type="datetime-local">, s'il n'a pas été trafiqué par l'usager, retourne toujours une date au format ISO : AAAA-MM-JJTHH:MM
if (regex.test(valeur)) {
valide = true;
// Si la date n'existe pas, JavaScipt débordera silencieusement : 30 février 2026 deviendra 2 mars 2026.
let objetDate = new Date(valeur);
// Reconstruire une chaîne au même format AAAA-MM-JJTHH:MM
const annee = objetDate.getUTCFullYear(); // les fonctions avec UTC dans le nom travaillent dans le fuseau horaire local
const mois = String(objetDate.getUTCMonth() + 1).padStart(2, '0');
const jour = String(objetDate.getUTCDate()).padStart(2, '0');
const heure = String(objetDate.getUTCHours()).padStart(2, '0');
const minute = String(objetDate.getUTCMinutes()).padStart(2, '0');
const valeurReconstruite = `${annee}-${mois}-${jour}T${heure}:${minute}`;
if (valeur === valeurReconstruite) {
valide = true;
} else {
messageErreur = "La date limite est invalide.";
}
}
else {
messageErreur = "La date limite a un format incorrect.";
}
}
if (valide) {
// s'assurer qu'il n'y a plus de trace d'une erreur qui serait survenue avant
}
else {
// réagir à l'erreur ici
}
}
else {
console.log('Impossible de retrouver la case de la date limite dans le formulaire.');
}
return valide;
}
▼Publicité
