Prefer to view the site in English? For relevant information, visit the English version of the website.
06Sep, 2016
14Réaction(s)

Configurez des masques de saisie pour limiter les erreurs !

Un masque de saisie permet de définir le format attendu dans un champ de saisie.

Étape 1 : Définissez votre masque de saisie.

Expressions régulières simples :

Vous pouvez très facilement créer des expressions régulières pour votre masque de saisie en utilisant les caractères A pour une lettre, N pour un nombre entier.

Voici des exemples :

  • une date : NN-NN-NNNN
  • une plaque d’immatriculation : AA-NNN-AA
  • un numéro de sécurité sociale : N NN NN NN NNN NNN NN

Expressions régulières complexes :

Pour vous aider à créer des expressions régulières complexes, vous pouvez vous aider du site internet Regex101.com.

Voici une chaîne rassemblant différentes famille :

/^(?=.*[A-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@])(?!.*[iIoO])\S{6,12}$/

  • /^ ces symboles placés en premier indique tout simplement le début de notre chaîne.
  • (?=.*[A-z]) permet de tester la présence de lettre (minuscule ou majuscule).
  • (?=.*[a-z]) permet de tester la présence de minuscules.
  • (?=.*[A-Z]) permet de tester la présence de majuscules.
  • (?=.*[0-9]) permet de tester la présence de chiffres.
  • (?=.*[$@]) permet de tester la présence de caractères spéciaux parmi $ et @.
  • (?!.*[iIoO]) permet de tester l’absence des lettres i, I, o et O.
  • \S{6,12} permet de définir une longueur minimal de 6 caractères et maximal de 12.
  • $/ vous permet d’indiquer la fin de notre chaîne.

Du coup, notre chaîne initiale nous permet de tester la présence : Au moins une lettre dont une majuscule, un chiffre, un caractère parmi ($, @), mais pas i, I, o, O, et entre 6 et 12 caractères (hors espaces).

Vous pouvez bien entendu modifier une Regex à votre guise ; créer une nouvelle expression régulière (si vous avez des connaissances en informatique) ou simplement ajouter ou supprimer les groupes de parenthèses qui correspondent aux caractères que vous (ne) souhaitez (pas) avoir dans votre mot de passe.

Voici d’autres exemples :

  • /^0[,.]([1-8]\d|90)$/ : la valeur doit être entre 0,10 ET 0,90.
  • /^22[,.]([1-9])$/ : la valeur doit être entre 22,1 ET 22,9.
  • /^(1[8-9]|2[0-4])$/ : la valeur doit 18 et 24.
  • /^(3([.,]\d{1,2})?|4([.,]0{1,2})?)$/ : la valeur doit être en 3 et 4 avec la prise en compte des décimales.
  • Code de nomenclature interne type 2015J02 : /^2015[A-Z]\d{2}$/
  • Une suite de 5 chiffres, tous pairs : /^[02468]{5}$/
  • Le mot « process » qui doit apparaître absolument à la fin de la saisie : /process$/gi
  • Un nombre à une décimale, avec la décimale obligatoire : /^[1-9][0-9]*[,.][0-9]$/
  • Un nombre à une décimale, avec la décimale facultative : /^[1-9][0-9]*([,.][0-9])?$/

Étape 2 : Paramétrez votre champ de saisie.

  • Allez dans les options de votre champ de saisie, dans l’onglet « Avancé ».
  • Pour définir le format de votre masque de saisie, complétez la case « Masque de saisie (Expression régulière) » avec votre expression régulière.
  • Pour ajouter une aide à propos du masque de saisie, complétez la case « Masque de saisie (Explications pour les mobiles)» avec les indications permettant de comprendre et de respecter le format demandé pour la saisie.
  • Pour finir, cliquez sur Valider pour enregistrer.
Insérez votre masque de saisie.

Astuce : N’hésitez pas à utiliser la fonction Aide du champ afin d’aider votre collaborateur lors de la saisie.

Pour cela, rendez-vous dans les options de l’élément, onglet Affichage et définissez votre texte dans le champ de saisie Texte d’aide.

rendez-vous dans les options de l'élément, onglet Affichage et définissez votre texte dans le champ de saisie Texte d'aide.

Le texte d’aide se matérialisera par une info-bulle sur l’appareil mobile.

Cliquez sur l'info bulle pour lire le texte d'aide.
Cliquez sur l'info bulle pour lire le texte d'aide.

Sur le mobile.

La saisie n’est valide que si son format correspond à celui prédéfini par l’expression régulière configurée.
Si le format saisi est incorrect, le champ apparaît en rouge. Il rend alors sa saisie correcte obligatoire.

Ce dernier affiche le message que nous avions indiqué précédemment dans le champ Masque de saisie (Explication pour les mobiles).

Une icône rouge s'affiche si le format du masque de saisie n'est pas respecté.

L’utilisateur ne peut enregistrer son formulaire.

Un message indiquant que l’ensemble des champs n’est pas complété apparaît.

Si le format du masque de saisie n'est pas respecté, le formulaire ne peut pas être enregistré.


En revanche, lorsque la saisie respecte le format demandé, le champ retrouve sa couleur d’origine.

Affichage mobile lorsque la syntaxe est correcte

N’hésitez pas à commenter cet article !
Nous sommes disponibles pour répondre à vos questions, suggestions, remarques, etc. !


Il y a 14 commentaires

  • bourdeaux

    14 Déc, 2020

    bonjour,
    est il possible de limiter le nombre de caractères dans un champs de saisie

    • Charles Leconte

      15 Déc, 2020

      Bonjour,

      Oui cela est tout à fait possible en utilisant la syntaxe indiquée un peu plus haut dans le tutoriel : \S{6,12}. Elle permet de définir une longueur minimal de 6 caractères et maximal de 12, vous pouvez modifier ces valeurs.

      J’espère que cela vous aidera.

      Bonne fin d’après-midi,
      Charles

  • QUINET

    01 Juil, 2020

    Bonjour j’ai créé un champ de saisie ou j’impose 14 chiffres en notant NNNNNNNNNNNNNN
    Le souci est si les 14 chiffres commence par un 0. Celui ne reste pas dans le transfert

    • Patrick Carloni

      01 Juil, 2020

      Bonjour,
      si votre champ de saisie est déclaré en numérique, l’application interprétera la suite de 0 comme un numérique nul.
      Si votre champ de saisie est déclaré en texte, l’application interprétera la suite de 0 comme une chaine de caractère et ne modifiera pas la saisie.
      En espérant avoir répondu à votre question.

  • mottin

    20 Juil, 2018

    Bonjour,
    Dans les propriétés d’un champ de saisie, il est possible de choisir :
    Texte; Numérique Entier; Numérique Décimal; N° de téléphone; Email; Adresse WEB.
    Je souhaiterais créer un masque pour une adresse IP.
    Le défaut et que si je souhaite que le clavier n’affiche que des nombres, il faut choisi une des propriétés numériques précédemment nommées, qui ne tolère pas le format adresse IP.
    Avez vous une solution ?
    Merci

    • Sarah Marivaux

      23 Juil, 2018

      Bonjour,

      IL est vrai que le clavier type numérique entier ne tolère que la virgule. De ce fait, je vous conseille d’utiliser le clavier numérique décimal ou texte.

      Cordialement,

  • Kayser

    04 Juin, 2018

    Bonjour, je voudrais afficher du texte fixe avec des valeurs numériques variables comme ceci :
    ##x##⌀.
    Les ‘#’ sont des données à rentrées par l’utilisateur, le reste est du texte fixe.

    Merci d’avance pour votre aide

    Cordialement

    • Soraya Boualam

      04 Juin, 2018

      Bonjour,

      Il n’est pas possible d’implémenter une saisie à un texte fixe. Vous pouvez passer par un champ de saisie avec masque de saisie.

      Restant à votre disposition,

      Bonne journée.

  • PONCIN

    16 Avr, 2018

    Bonjour,

    Je souhaite afficher un masque de saisie avec du texte fixe et variable comme cela :
    ABC#####_###_##_K_08
    Les # sont les données à saisir le reste du fixe.
    Est ce possible .
    Merci d’avance pour votre aide
    Cordialement

    • Sarah Marivaux

      16 Avr, 2018

      Bonjour,

      Voici la formule que vous pouvez utiliser : /^ABC\w{10}_K_08$/.

      Cordialement,

  • Sylvain Duchatel

    20 Juil, 2017

    Bonjour,

    J’utilise régulièrement l’expression régulièrement pour contrôler le format des données renseignées par nos équipes. Je viens de découvrir un bug que je voudrais vous partager.

    J’utilise l’expression souvent régulière ^-\d*\.?\d+$ dans un champ de saisie afin d’imposer uniquement des nombres négatifs avec un séparateur point. J’impose l’utilisation du point car la virgule n’est pas reconnue par l’outil graphiques.
    Cette expression régulière fonctionne bien tant que le “type” dans les propriétés du champ de saisie est réglé sur “texte”. Si on sélectionne “Numérique Décimale” en “type” alors le formulaire ignore la condition \.? de l’expression régulière et autorise à la fois la virgule et le point.

    Néanmoins, l’option “Numérique Décimale” est importante car elle permet d’afficher un pavé numérique sur les interfaces mobiles. C’est bien plus pratique que le clavier traditionnel affiché de base. Mais si on conserve l’option “numérique décimale” alors l’utilisateur sur l’interface web peut saisir une valeur décimale à virgule et faire planter l’affichage graphique.

    • Sarah Marivaux

      20 Juil, 2017

      Bonjour,

      Nous n’arrivons pas à reproduire votre souci. Pourriez-vous nous communiquer plus d’information par e-mail à support@kizeo.com ?

      Cordialement,

  • Nicolas CAYREL

    16 Juil, 2017

    Bonjour,

    Il est possible d’utiliser des masques de saisie dans les champs de saisie, ce qui est très pratique pour remplir une base de données dont le type des champs est défini.

    En revanche, est-il possible d’appliquer ces masques pour d’autres champs ? Je pense notamment aux codes barres et aux références lorsque leur saisie est modifiable.

    J’ai essayé d’utiliser les options de visibilité pour arriver à mes fins afin de détecter des lettres dans les champs supposés rester des entiers, mais la détection ne marche que sur la première lettre. (lorsque je met que le champ doit etre > 99999 par exemple)

    Je suis preneur de tout autre moyen de limiter la saisie de ces champs.

    Merci.

    • Sarah Marivaux

      17 Juil, 2017

      Bonjour,

      Il n’existe malheureusement aucune autre possibilité ; cependant cette extension est notée dans roadmap.

      Cordialement,

Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *