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 !