IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Controle saisie champ


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2004
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2004
    Messages : 10
    Points : 11
    Points
    11
    Par défaut Controle saisie champ
    Bonjour
    J'ai trouvé un script qui permet de faire un contrôle sur la saisie d'une date dans un champ (dd/mm/aaaa), je voudrais l'adapter mais j'ai peu de connaissance en javascript. Si quelqu'un pourrait m'aider à obtenir le format dd/mm/aaaa-hh:ss

    Voici le code javascript :
    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
    // Date Validation and Format Javascript
    // copyright 11th June 2007 by Stephen Chapman
    // permission to use this Javascript on your web page is granted
    // provided that all of the code in this script (including these
    // comments) is used without any alteration
    // you may swap the 12 and 31 around if you want mm/dd instead of dd/mm
     
    function dtval(d,e) {
    var pK = e ? e.which : window.event.keyCode;
    if (pK == 8) {d.value = substr(0,d.value.length-1); return;}
    var dt = d.value;
    var da = dt.split('/');
    for (var a = 0; a < da.length; a++) {if (da[a] != +da[a]) da[a] = da[a].substr(0,da[a].length-1);}
    if (da[0] > 31) {da[1] = da[0].substr(da[0].length-1,1);da[0] = '0'+da[0].substr(0,da[0].length-1);}
    if (da[1] > 12) {da[2] = da[1].substr(da[1].length-1,1);da[1] = '0'+da[1].substr(0,da[1].length-1);}
    if (da[2] > 9999) da[1] = da[2].substr(0,da[2].length-1);
    dt = da.join('/');
    if (dt.length == 2 || dt.length == 5) dt += '/';
    d.value = dt;
    }
    code HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form name="myform">
    <div>
    <label for="mydate">Enter a date (dd/mm/ccyy)</label>
    <input type="text" id="mydate" name="mydate" size="10" maxlength="10"
    onkeyup="dtval(this,event)">
    </div>
    </form>
    Merci de votre aide

  2. #2
    Membre habitué
    Profil pro
    Étudiant
    Inscrit en
    Décembre 2006
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2006
    Messages : 115
    Points : 125
    Points
    125
    Par défaut
    Salut,

    Je ne comprends pas l'utilité de cette fonction.
    Si le but est de vérifier la validité d'une date, elle est horrible ! Ça fait vraiment n'importe quoi.

    En voici une autre, qui te dira simplement si la date est au format jj/mm/aaaa-hh:mm:ss et réaliste (pas de 75ème seconde), sans chercher à la modifier.
    La seule modification qu'il s'autorise à faire, c'est de rajouter les zéros non-significatifs.
    Dans la vérification du jour, il prend en compte le mois, ainsi que les années bissextiles.
    T'as de la chance que je m'ennuie en classe

    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <script type="text/javascript">
     
    // ajoute les zéros non-significatif, si besoin
    function addZero(nbre){
    	if(nbre<10 && nbre.length<2)
    		nbre="0"+nbre;
    	return nbre;
    }
     
    // calcul le nombre de jours par mois
    function jours(mois, annee){
     
    	var jMax=31; // 31 par défaut
     
    	switch(mois){
    		case "4": case "6": case "9": case "04": case "06": case "09": case "11": // mois à 30 jours
    			jMax=30;
    		break;
    		case "2": case "02": // février
    			if(annee%4==0 && annee%100!=0 || annee%400==0) // année bisextile ?
    				jMax=29;
    			else
    				jMax=28;
    	}
     
    	return jMax;
    }
     
    // test la date
    function dateValidation(dateTime) {
     
    	// test le format
    	if(!dateTime.match(/\d{1,2}\/\d{1,2}\/\d{4}-\d{1,2}:\d{1,2}:\d{1,2}/))
    		return false;
     
    	// récupère le jour, mois, année, heure, minute et seconde
    	var date=dateTime.split("-")[0];
    	var time=dateTime.split("-")[1];
     
    	var date=date.split("/");
    	var time=time.split(":");
     
    	// vérifie que les nombres ne soient pas trop grands
    	if(date[0]>jours(date[1], date[2]) || date[1]>12 || time[0]>23 || time[1]>59 || time[2]>59)
    		return false;
     
    	// ajoute les zéros non-significatifs
    	date[0]=addZero(date[0]);
    	date[1]=addZero(date[1]);
    	time[0]=addZero(time[0]);
    	time[1]=addZero(time[1]);
    	time[2]=addZero(time[2]);
     
    	// retourne la date complète
    	return date.join("/")+"-"+time.join(":");
    }
    </script>
     
    <input id="date" value="12/11/2012-15:45:58" />
    <input type="button" value="calc" onclick="
    	var input=document.getElementById('date');
    	var result=dateValidation(input.value);
    	result
    	?
    		input.value=result
    	:
    		alert ('Attention, il y a un problème.\nPeut-être que le format n\'est pas respecté (jj/mm/aaaa-hh:mm:ss)\nOu qu\'un nombre est trop élevé (il y a au maximum 28 à 31 jours (selon le mois), 12 mois, 23 heures, 59 minutes et 59 secondes)\nIl est possible d\'omettre un chiffre pour tout (les zéros seront alors ajoutés avant le nombre), sauf pour la date. Car il est impossible de savoir s\'il s\'agit de 1910 ou de 2010. Pour les dates inférieures à l\'an mille, complétez avec des zéros (0256 pour l\'an 256)')" />

  3. #3
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    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
    28
    29
    30
     
     
    <form id="quand" action="">
    	<div>
    		<strong>
    			Saisissez une date de la forme aaaa-mm-jj hh:mm
    		</strong>
     
    		<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 name="h" type="text" size="1" maxlength="2" /> : 
    		<input name="min" type="text" size="1" maxlength="2" /> 
    		<input type="button" value="ok" onclick="verif(f['a'].value,f['m'].value,f['j'].value,f['h'].value,f['min'].value)" /> 
    	</div>
    </form>
     
    <script type="text/javascript">
     
    document.forms["quand"].style.display="block";
    var f=document.forms["quand"].elements;
     
    function verif(a,m,j,h,min){ 
    	m-=1;
    	d=new Date(a,m,j,h,min);
    	var rep= (d.getFullYear()!=a || d.getMonth()!=m || d.getHours()!=h) ? "date invalide" : "date valide";
    	alert(rep); 
    } 
     
    </script>

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2004
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2004
    Messages : 10
    Points : 11
    Points
    11
    Par défaut
    Bonsoir merci pour vos réponses.
    L'utilité de cette fonction est une aide à la saisie.

    Cela évitera de saisir des dates sous la forme :

    19-11-2012 8h30
    19.11.2012 08h30
    19.11.2012 08:30:27
    etc...

    et de forcer la saisie de la date sous la forme

    19/11/2012-08:30

  5. #5
    Membre actif

    Profil pro
    Inscrit en
    Juillet 2012
    Messages
    183
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 183
    Points : 274
    Points
    274
    Par défaut
    A l'arrache :

    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
     
    function check(field) {
      var isValid = validateDateAndTime(field.value);  
      if(isValid) {
         formatField(field);
      }
    }
     
     
    function validateDateAndTime(date) {
      var n = date.match(/(\d+)/g);
      var newDate = new Date(n[2], n[1]*1-1, n[0], n[3]*1, n[4]*1);
      return newDate.getFullYear()==n[2]*1 && newDate.getMonth()+1==n[1]*1 && newDate.getDate() == n[0]*1 && newDate.getHours()==n[3]*1 && newDate.getMinutes()==n[4]*1;
    }
     
    function formatField(field) {
      var mask = "%/%/%-%:%"; 
      field.value.replace(/(\d+)/g, function(a){
          mask = mask.replace('%', leadZero(a*1));
      });
      field.value=mask;
    }
     
    function leadZero(val) {
      return val<10 ? '0'+val : val; 
    }

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
      <input type="text" value="19-11-2012 8h30" onblur="check(this)">
    Voici le lien vers l'exemple
    http://jsbin.com/asicap/2/edit

    Donc qu'est ce que j'ai fait, c'est simple, j'ai une fonction check, qui valide si j'ai bien une date correcte avec des heures et minutes correctes.
    La technique est simple, il suffit juste de récupérer tous les groupes de chiffre de la chaine de caractères et ensuite instancier une nouvelle date à partir de ces paramètres : new Date(year, month, date, hours, minutes).

    Ensuite il suffit simplement tester chaque valeur d'origine avec les valeurs de l'objet Date, car oui, Date est intelligent, si vous lui mettez new Date (2000, 23, 40), il recalculera la date car le 40e jours du 23eme mois de l'année pour lui ça n'existe pas, et il calcule. Donc donc dans ce cas année, mois et jours deviennent faux et la fonction retourne false.

    Ensuite si la date est valide, alors je la reformate en fonction d'un mask, j'utilise pour cela une méthode vieille comme le monde, un replace de la chaine avec une regexp et avec une fonction à l'intérieure. Dans cette fonction je remplace simplement le même terme qui se trouve dans mask à chaque fois avec une valeur différente. et oui, un replace simple ne fonctionne qu'une fois, quand on veut remplacer tous les mêmes termes d'une string on passe par une regexp.

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2004
    Messages
    10
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2004
    Messages : 10
    Points : 11
    Points
    11
    Par défaut
    Merci Arnogues pour ton aide
    Ton code réponds à ce que j'attendais comme résultat.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2003] Inputmask-format de saisie/ Controle et champs
    Par mjcom dans le forum VBA Access
    Réponses: 2
    Dernier message: 01/09/2011, 14h04
  2. Controle des champs saisies sur une Applet
    Par bellemlih dans le forum Interfaces Graphiques en Java
    Réponses: 4
    Dernier message: 21/01/2008, 15h57
  3. controle des champs de saisie
    Par etud_ini dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 05/08/2007, 15h29
  4. controle saisie
    Par star_light dans le forum C++
    Réponses: 14
    Dernier message: 15/03/2005, 19h19
  5. saisi champs texte
    Par j2zetka dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/12/2004, 14h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo