Discussion :

[TigerCX]

Bonjour à tous,

J'apprends tranquillement à me servir de la bibliothèque jQuery, donc je ne suis pas un expert, loin de là. Je suis à réaliser un formulaire avec des champs de date que je traite à la volée. Lorsque le focus est sur le champ, j'enlève les tirets, lorsque je perds le focus, j'ajoute les tirets. Je pourrais optimiser mon code, mais ça fonctionne comme je le souhaite.

Le problème vient lorsque je soumets mon formulaire. Si l'utilisateur appui sur la touche «ENTRÉE» plutôt que de cliquer sur le bouton «submit» pendant qu'il a le focus sur un champ date, le format avec tirets ne s'applique pas. C'est logique. J'ai eu l'idée que lorsqu'on soumet le formulaire, je fait une action blur() sur chaque champ de date pour forcer la mise en forme. Malheureusement, ça ne fonctionne pas, il faut plutôt l'inverse et enlève les tirets.

Code html :

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

1
2
3
4
5
6
7
8
9
<form name="formAbsence" id="formAbsence" method="post" action="javascript:void(0)">
<label>Date de début</label>
<input type="text" name="dateconge" id="dateconge" class="form-control date-input" placeholder="aaaammjj" />
<label>Date de fin</label>
<input type="text" name="datefin" id="datefin" class="form-control date-input" placeholder="aaaammjj" />
<label>Date du férié</label>
<input type="text" name="dateferie" id="dateferie" class="form-control date-input" placeholder="aaaammjj" />
<button id="enregistrer" type="submit" class="btn btn-outline btn-primary btn-block">Enregistrer</button>
</form>

Code javascript :

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

1
2
3
4
5
6
$(".date-input").focus(function(){
  temp = $(this).val();
  if(temp.length == 10){
    $(this).val(temp[0]+temp[1]+temp[2]+temp[3]+temp[5]+temp[6]+temp[8]+temp[9]);
  }
});

Code javasvript :

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
$(".date-input").blur(function(){
  temp = $(this).val();
  if(temp.length == 8 && !isNaN(temp)){
    $(this).val(temp[0]+temp[1]+temp[2]+temp[3]+"-"+temp[4]+temp[5]+"-"+temp[6]+temp[7]);
    $(this).parent("div").addClass("has-success");
    $(this).parent("div").removeClass("has-error");
  }
  else{
    if(temp != ""){
      $(this).parent("div").removeClass("has-success");
      $(this).parent("div").addClass("has-error");
      $(this).focus();
    }
    else{
      $(this).parent("div").removeClass("has-success");
      $(this).parent("div").removeClass("has-error");
    }
  }
});

Code javascript :

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

1
2
3
$("#formAbsence").submit(function(){
  $('.date-input').blur();
});

Et le résultat :
<

Dans un élan de folie, j'ai fait ceci pour tester

Code javascript :

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

1
2
3
$("#formAbsence").submit(function(){
  $('.date-input').focus();
});

Et ça me donne le résultat escompté. Au delà de ma satisfaction à ce que mon formulaire soit correct, j'aimerais comprendre la logique derrière car actuellement ça ne fait aucun sens.

Merci de bien vouloir m'aider !

[-Rpass-]

Je n'arrive pas à expliquer pourquoi ton premier code ne fonctionne pas, mais pour le fait que ça marche avec la méthode focus() j'ai peut-être une explication :

Tu ne peux pas faire un focus sur deux éléments en même temps, donc ton code :

Code :

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

1
2
3
$("#formAbsence").submit(function(){
  $('.date-input').focus();
});

Tu vas faire un focus sur ton 1er champs date -> Puis focus sur le 2eme champs -> Tu perds donc le focus du 1er champs (ce qui appelle ton évènement blur) -> Puis focus sur le 3eme champs -> Perd le focus du 2eme -> et ainsi de suite ...

[TigerCX]

Je viens de faire quelques changements et j'avance dans le diagnostic du problème. Mon problème vient du code

Code javascript :

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
$(".date-input").blur(function(){
  temp = $(this).val();
  if(temp.length == 8 && !isNaN(temp)){
    $(this).val(temp[0]+temp[1]+temp[2]+temp[3]+"-"+temp[4]+temp[5]+"-"+temp[6]+temp[7]);
    $(this).parent("div").addClass("has-success");
    $(this).parent("div").removeClass("has-error");
  }
  else{
    if(temp != ""){
      $(this).parent("div").removeClass("has-success");
      $(this).parent("div").addClass("has-error");
      $(this).focus();
    }
    else{
      $(this).parent("div").removeClass("has-success");
      $(this).parent("div").removeClass("has-error");
    }
  }
});

En mettant en commentaire la ligne où je mets le focus avec $(this).focus(); ça change la réaction.

Je vais continuer d'investiguer et je reviendrai pour résoudre l'énigme pour aider mon prochain!

[TigerCX]

C'était tout simple, mais quand ça fait longtemps qu'on remue la soupe, on ne la sent plus

Dans ma vérification dans le blur(), le premier if vérifie si la date n'est composé que de 8 chiffres. Si le focus n'est plus sur le champ d'une date, cette dernière contient 10 caractères dont des tirets. C'est pourquoi mes champs sont transformés comme s'ils contenaient des erreurs.

Je marque comme résolu mais en fait ce n'est pas un problème jquery, mais de javascript tout simple!