06Sep, 2016
10Ré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.

Etape 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 des exemples :

  • 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])?$/

Etape 2 : Paramétrez votre champ de saisie.

  • Allez dans les options de votre champ de saisie, dans l’onglet « Avancé ».

Insérez votre masque de saisie.

  • 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.

Sur le mobile.

Le texte d’aide se matérialisera par une info-bulle :

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

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, une icône rouge avec un point d’exclamation apparaît sur la gauche du champ.

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

L’utilisateur ne peut enregistrer son formulaire. Le message suivant s’affiche :

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é, une icône verte apparaît sur la gauche du champ.

Une icône verte s'affiche si le format du masque de saisie a été respecté.

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

image_pdfimage_print

Il y a 10 commentaires

  • 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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *