Bonjour,
alors je suis plus ou moins débutante en programmation web, et ce que je veux faire c'est vérifier la validité d'une date dans un formulaire.
j'ai vérifié tous les autres champs , il ne me reste plus que la date et je rencontre un problème que je n'arrive pas a trouver ..
Pouvez vous m'aider s'il vous plait.
c'est assez urgent
mon fichier js:
Modifié par Ka_Ben (06 Dec 2014 - 15:14)
alors je suis plus ou moins débutante en programmation web, et ce que je veux faire c'est vérifier la validité d'une date dans un formulaire.
j'ai vérifié tous les autres champs , il ne me reste plus que la date et je rencontre un problème que je n'arrive pas a trouver ..
Pouvez vous m'aider s'il vous plait.
c'est assez urgent
[code=html]
<form action="" id="myForm">
<fieldset>
<legend><b>Informations personnelles</b></legend>
<label class="form_col" for="nom">Nom :</label>
<input name="nom" id="nom" type="text" />
<span class="tooltip">Un nom ne peut pas faire moins de 2 caractères</span>
<br/><br/>
<label class="form_col" for="prénom">Prénom :</label>
<input name="prénom" id="prénom" type="text" />
<span class="tooltip">Un prénom ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="Matricule">Matricule :</label>
<input name="Matricule" id="Matricule" type="text" />
<span class="tooltip">Le Matricule s'écrit sur 12 chiffres</span>
<br /><br />
<label class="form_col" for="birthday">Date de naissance : </label>
<input type="text" class="day" id="birthday" name="day" placeholder="jj/mm/yyyy" />
<span class="tooltip">Vous devez remplir votre date de naissance </span>
<br /><br />
<label class="form_col" for="Adresse">Adresse :</label>
<input name="Adresse" id="Adresse" type="text" />
<span class="tooltip">L'Adresse ne peut pas faire moins de 4 caractères</span>
<br /><br />
<label class="form_col" for="Filière">Filière :</label>
<select name="Filière" id="Filière">
<option value="none">Sélectionnez votre Filière </option>
<option value="mil">MIL</option>
<option value="sii">SII</option>
<option value="rsd">RSD</option>
</select>
<span class="tooltip">Vous devez sélectionner votre Filière </span>
<br /><br />
<label class="form_col" for="groupe">Groupe :</label>
<select name="groupe" id="groupe">
<option value="none">Sélectionnez votre Groupe</option>
<option value="g1">Groupe1</option>
<option value="g2">Groupe2</option>
<option value="g3">Groupe3</option>
<option value="g4">Groupe4</option>
</select>
<span class="tooltip">Vous devez sélectionner votre groupe</span>
<br /><br />
<label class="form_col" for="année">Année d'inscription :</label>
<select name="année" id="année">
<option value="none">Sélectionnez votre Année d'inscription</option>
<option value="y1">1ère année Master</option>
<option value="y2">2ème année Master</option>
</select>
<span class="tooltip">Vous devez sélectionner votre année d'inscription</span>
<br /><br />
<span class="form_col"></span>
<input type="submit" value="Ajouter" />
</fieldset>
mon fichier js:
[code=javascript]
(function() {
// Fonction de désactivation de l'affichMatricule des « tooltips »
function deactivateTooltips() {
var spans = document.getElementsByTagName('span'),
spansLength = spans.length;
for (var i = 0 ; i < spansLength ; i++) { //Parcourir les balises span avec une classe tooltip.
if (spans[i].className == 'tooltip') {
spans[i].style.display = 'none';
}
}
}
// La fonction ci-dessous permet de récupérer la tooltip qui correspond à notre input
function getTooltip(element) {
while (element = element.nextSibling) { //Toutes les balises spans sont apres les balises input, donc on recherche la balise input, et on recherche le plus proche element
//d'où l'utilisation de nextSibling.
if (element.className === 'tooltip') {
return element;
}
}
return false;
}
// Fonctions de vérification du formulaire, elles renvoient true si tout est OK
var check = {}; // On met toutes nos fonctions dans un objet littéral
check['prénom'] = function(id) { // Cette fonction est la même pour Nom et Prénom, donc on fait rentrer un id en prametre ce qui nous permettera de ne pas réécrire la fct une 2ème fois.
var name = document.getElementById(id),
tooltipStyle = getTooltip(name).style;
if (name.value.length >= 2) { //Si le contenu remplit bien la condition, alors on attribue à notre <input> la classe .correct, on désactive l'affichage de la bulle d'aide et on retourne true.
name.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
name.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['nom'] = check['prénom']; // lorsque nous appellerons la fonction check['nom'](), implicitement ce sera la fonction check['prénom']() qui sera appelée.
check['birthday']=function verif(){
var date_pas_sure = document.getElementById('birthday').value;
var format = /^(\d{1,2}\/){2}\d{4}$/;
if(!format.test(date_pas_sure)){
birthday.className = 'incorrect';
alert('Date non valable !')
return false;
}
else{
var date_temp = date_pas_sure.split('/');
date_temp[1] -=1; // On rectifie le mois !!!
var ma_date = new Date();
ma_date.setFullYear(date_temp[2]);
ma_date.setMonth(date_temp[1]);
ma_date.setDate(date_temp[0]);
if(ma_date.getFullYear()==date_temp[2] && ma_date.getMonth()==date_temp[1] && ma_date.getDate()==date_temp[0]){
birthday.className = 'correct';
alert('Date valable !');
return true;
}
else{
alert('Date non valable !');
}
}
}
check['Matricule'] = function() {
var Matricule = document.getElementById('Matricule'),
tooltipStyle = getTooltip(Matricule).style,
MatriculeValue = parseInt(Matricule.value);
if (!isNaN(MatriculeValue) && (Matricule.value.length == 12) ) { // isNan: Retourne true si chaine n'est pas un nombre, sinon retourne false
Matricule.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
Matricule.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['Adresse'] = function() {
var Adresse = document.getElementById('Adresse'),
tooltipStyle = getTooltip(Adresse).style;
if (Adresse.value.length >= 4) {
Adresse.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
Adresse.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['Filière'] = function() {
var Filière = document.getElementById('Filière'),
tooltipStyle = getTooltip(Filière).style;
if (Filière.options[Filière.selectedIndex].value != 'none') {
tooltipStyle.display = 'none';
return true;
} else {
tooltipStyle.display = 'inline-block';
return false;
}
};
check['groupe'] = function() {
var groupe = document.getElementById('groupe'),
tooltipStyle = getTooltip(groupe).style;
if (groupe.options[groupe.selectedIndex].value != 'none') {
tooltipStyle.display = 'none';
return true;
} else {
tooltipStyle.display = 'inline-block';
return false;
}
};
check['année'] = function() {
var année = document.getElementById('année'),
tooltipStyle = getTooltip(année).style;
if (année.options[année.selectedIndex].value != 'none') {
tooltipStyle.display = 'none';
return true;
} else {
tooltipStyle.display = 'inline-block';
return false;
}
};
// Mise en place des événements
(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
var myForm = document.getElementById('myForm'),
inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;
for (var i = 0 ; i < inputsLength ; i++) { //il s'agit de parcourir les inputs et d'agir seulement sur ceux qui sont de type text.
if (inputs[i].type == 'text') {
inputs[i].onkeyup = function() { //permet d'assigner une fonction anonyme à l'événement keyup de l'<input> actuellement traité.
check[this.id](this.id); // « this » représente l'input actuellement modifié.
};
}
}
myForm.onsubmit = function() { //parcourir notre tableau check et exécuter toutes les fonctions qu'il contient avec la valeur retournée dans result.
var result = true;
for (var i in check) {
result = check[i](i) && result;
}
if (result) { // Si le resultat est false, l'alert ne s'executera pas.
alert('Le formulaire est bien rempli.');
}
return false;
};
})();
// Maintenant que tout est initialisé, on peut désactiver les tooltips
deactivateTooltips();
})();
Modifié par Ka_Ben (06 Dec 2014 - 15:14)
aa, et plus vraisemblablement accepter n'importe quel séparateur (espace (multiples), virgules, tirets...) Mais l'ordre jour mois année est le seul acceptable par un français (normal 
, car encore le AAAA/MM/JJ peut s'avérer utile pour le tri automatique par exemple.