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


Il y a 4 commentaires

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