Partage
  • Partager sur Facebook
  • Partager sur Twitter

pattern sur un champ input en HTML et regEx

comment forcer l'utilisateur à rentrer une date au format dd-mm-aaaa

Sujet résolu
    6 février 2024 à 20:49:01

    Bonjour, j'ai un champ input dont j'ai besoin de forcer l'utilisateur à utiliser le format dd-mm-aaaa 

    J'ai bien vu l'option pattern avec un truc de genre regex

    https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/pattern

    j'ai mis ceci :

    <input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10"value ="<?php echo $Date; ?>"pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}"required>


    j'oblige bien l'utilisateur à mettre de les - entre le jour et le mois et le mois et l'année... (Enfin s'il veut bien ne pas entrer que des chiffres) car avec mon pattern je peux mettre 10 chiffres sans aucun - ou même 10 -) mais il n'accepte que cela mais pas par couple de 2 chiffres - 2 chiffres- 4 chiffres...

    J'aurais voulu limiter aux dates possibles c'est à dire :

    les jours de 1 à 31

    les mois de 1 à 12

    et les années ben éventuellement sur une plage d'année pas par exemple 2573... ni 1815

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
      6 février 2024 à 21:08:16

      Bonjour,

      un input de type date, te limitera déjà dans les possibilités

      • Partager sur Facebook
      • Partager sur Twitter
        6 février 2024 à 22:12:18

        Oui mais j'utilise un input text car il est associé à un calendrier animé (les pages défilent) de sélection de date cela donne un truc de ce genre:

        Merci

        • Partager sur Facebook
        • Partager sur Twitter
          7 février 2024 à 9:22:25

          Celle-ci:

          						<!-- insertion code jquery du calendrier -->
          
          		<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
          
          		<script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
          
          		
          
          		<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>	

          Pour la partie animation.

          Merci

          • Partager sur Facebook
          • Partager sur Twitter
            9 février 2024 à 22:00:20

            J'ai quand même tester le type date a tou hasard mais cela rentre visuellement en conflit avec mon jquery qui lui aussi gère un calendrier...

            Si quelqu'un as une autre idée!

            Merci

            • Partager sur Facebook
            • Partager sur Twitter
              10 février 2024 à 12:34:12

              Bonjour,

              >> j'ai un champ input dont j'ai besoin de forcer l'utilisateur à utiliser le format dd-mm-aaaa 

              C'est ton jQuery qui génère la date, c'est de ce coté que tu dois regarder pour en modifier le format.

                      $(function () {
                          $("#datepicker").datepicker();
                          $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy");
                      });

              Source : https://jqueryui.com/datepicker/#date-formats

              Je déplace en JS.

              Déplacement vers un forum plus approprié

              Le sujet est déplacé de la section HTML/CSS vers la section Javascript

              • Partager sur Facebook
              • Partager sur Twitter
                10 février 2024 à 18:34:45

                Bonjour, oui et non effectivement je gère bien dans les options le format :

                $('#datepickerDebut').datepicker(datepickerOptions2);
                <div class="formGroup row aln-center">       <!-- Début de la class de la date du jour à modifier -->
                
                										
                
                										
                
                										<label for="datepickerDebut">
                
                <?php 										echo "Jour à modifier : &nbsp;"; 
                
                ?> 											
                
                										</label>
                
                									   
                
                										<input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo $Date; ?>" required>
                
                									   
                
                
                
                										<script>
                
                											document.getElementById("datepickerDebut").value = "<?php echo $Date?>";
                
                										</script>
                
                
                
                									</div>      <!-- Fin de la class de la date du jour à modifier-->




                var datepickerOptions2 = {
                  monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                  dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                  dateFormat: 'dd-mm-yy',
                  prevText: 'Précédent',
                  nextText: 'Suivant',
                  firstDay: 1,
                  showOn: "both",
                  buttonText: "Choisir la date",
                  buttonImage: "/images/datepicker3.gif",
                  maxDate:"date()"

                et lors de la validation le contrôle est bien effectué mais si tu rentres par exemple --1234-499 et bien cela passe car il y a les 10 caractères, des chiffres et le signe -

                tu peux si tu veux aller voir ma page de test : (il n'y a rien derrière)

                http://gilles54.no-ip.info:9180/fonctions/test.php

                Merci



                Merci

                • Partager sur Facebook
                • Partager sur Twitter
                  10 février 2024 à 19:22:31

                  Bonsoir, si tu tiens vraiment à utiliser un pattern voici ci que je propose :

                  <input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10"
                  value="17-02-2024" class="hasDatepicker" required="" 
                  pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" 
                  title="Le format à respecter est dd-mm-aaaa">

                  mais des string comme 17-02-2024 (ce que ne permet pas la génération via le datepicker) ou 41-25-3561 est possible.

                  Je rajouterais l'attribut disabled au champ pour ne pas permettre la saisie texte directement dans le champ et forcer l'usage du datepicker.

                  https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/disabled

                  Bien évidement cela n'est qu'un leurre de sécurité, car en inspectant le code avec les outils de développement on peut supprimer tous les attributs que tu as ajoutés.

                  En tout état de cause la saisie utilisateur DOIT être vérifiée coté serveur, et si pas valide renvoyer un message d'erreur à l'utilisateur.

                  • Partager sur Facebook
                  • Partager sur Twitter
                    10 février 2024 à 20:02:45

                    Oui jusqu'à présent j'utilisais l'option readonly ce qui faisait que l'on passait directement par le calendrier et le format était nickel...

                    Mais en ayant rajouté 

                    value ="<?php echo $Date; ?>"  cela prérempli la date du jour (d'ailleurs je viens de voir que je le fais en HTML et javascript dans mon code au dessus...)

                    Et si on valide sans avoir vérifié c'est la cata puisque le format est bon le serveur va l'accepter mais ce n'est peut être pas ce qu'on voulait du coup je voudrais contrôler côté navigateur le format (sans préremplir la date) avant de le faire cote serveur et ne pas préremplir le champ de la date mais obliger à y mettre quelque chose si possible au bon format...

                    J'espère avoir été clair...

                    Merci

                    <fieldset>
                    
                        <label for="datepickerDebut">
                    <?php 		echo "Date du jour à modifier : &nbsp;"; 
                    
                    ?> 											
                    
                        </label>
                    									   
                        <input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo "dd-mm-yyyy"?>" pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" required >
                    
                    									  
                    																	
                    
                    </fieldset>

                    PS: j'ai teste le pattern

                    il n'empêche pas l'écriture de par exemple 1111111111 ou ---------- entre autre bref il semble inopérant...

                    Je suppose que c'est du coup le format dans datepicker qui prend la main du coup j'ai tenté une regex conne ceci:

                    var datepickerOptions2 = {
                      monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                      monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                      dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                      dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                      dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                      dateFormat: '^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](20|20)\d\d$',
                      prevText: 'Précédent',
                      nextText: 'Suivant',
                      firstDay: 1,
                      showOn: "both",
                      buttonText: "Choisir la date",
                      buttonImage: "/images/datepicker3.gif",
                      maxDate:"date()"
                    
                    };

                    sans plus de succès...

                    Merci

                    En fait plus j'y réfléchis et plus je trouve (ou plutôt ne trouve pas ) que l'idéal serais un disabled ou readonly dans le code de l'imput text mais avec un required qui fonctionne ce qui n'est pas le cas avec l'une ou l'autre de ses 2 options...

                    Merci

                    -
                    Edité par GillesMangin-Voirin 11 février 2024 à 18:31:41

                    • Partager sur Facebook
                    • Partager sur Twitter
                      18 février 2024 à 16:47:58

                      Bonjour, j'ai trouvé un contrôle

                      <input type="text" id="datepickerDebut" name="datepicker" minlength="10" maxlength="10" value ="<?php echo "dd-mm-yyyy"?>" 
                      
                      title="Le format à respecter est dd-mm-aaaa" 
                      
                      pattern="(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})" >
                      
                      




                      en HTML 5 avec pattern et le regex suivante:

                      Merci

                      issu de ce lien :

                      https://www.gekkode.com/developpement/expression-reguliere-pour-valider-une-date/

                      -
                      Edité par GillesMangin-Voirin 18 février 2024 à 16:48:23

                      • Partager sur Facebook
                      • Partager sur Twitter

                      pattern sur un champ input en HTML et regEx

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      • Editeur
                      • Markdown