Comment utiliser un composant d'interface utilisateur jQuery MaskedTextBox dans votre application

Comment pouvez-vous aider vos utilisateurs à savoir qu'ils envoient les bonnes informations et simplifient vos propres besoins de validation de données? Découvrez comment une MaskedTextBox peut améliorer votre application.

Dans ma dernière publication, vous avez découvert le composant AutoComplete une zone de texte affichant une liste filtrée de suggestions basées sur les entrées de l'utilisateur. Dans cet épisode, nous examinerons le composant MaskedTextBox .

Une MaskedTextBox est une entrée de texte qui vous permet de spécifier un masque de saisie pour contrôler les données pouvant être entrées. Vous utiliseriez un MaskedTextBox lorsque vos données ont un format fixe et que vous souhaitez vous assurer que les utilisateurs saisissent des valeurs exactes et complètes. Par exemple, les codes postaux, les numéros de carte de crédit et les numéros de téléphone ont un format standard et sont de bons candidats pour l'utilisation d'un MaskedTextBox . Dans ce tutoriel, vous apprendrez ce qu'est un masque de saisie et comment l'utiliser avec le composant MaskedTextBox pour Interface utilisateur Kendo .

Présentation de la saisie de texte HTML

Pour vérifier, il existe plusieurs types d'entrées que vous pouvez utiliser pour accepter des données. Ces types d'entrées incluent la radio et la case à cocher, ainsi que les nouveaux types, tels que l'adresse électronique et le numéro. Tous ces éléments limitent le type de données que l'utilisateur peut soumettre. Cependant, avec le type de saisie de texte, un utilisateur peut entrer pratiquement tout ce qu’il veut, y compris un code malveillant. C'est pourquoi il est nécessaire de valider les données et de restreindre ce que l'utilisateur peut entrer. Cela garantit que l'utilisateur nous donne les données correctes. Supposons que vous souhaitiez obtenir des numéros de sécurité sociale sous la forme de ### – ## – #### `. Avec HTML simple, vous devez utiliser une entrée de texte et spécifier le format avec l'attribut pattern . Un motif est une expression régulière. Voici comment vous pouvez implémenter ceci en utilisant uniquement HTML:

Dans cet exemple, l'utilisateur peut saisir les valeurs souhaitées. Les données sont validées après avoir cliqué sur le bouton d'envoi. Si l'entrée ne correspond pas au modèle d'expression régulière, un message d'erreur s'affiche. Si les valeurs correctes sont entrées, le formulaire se soumettra normalement.

La ​​validation de cette entrée présente certains inconvénients. Bien que l'entrée ne soit acceptée que si elle correspond au format que nous avons spécifié, l'utilisateur peut toujours entrer des données non valides. De plus, l'utilisateur sait uniquement que les données ne sont pas valides après leur soumission. Nous préférerions que les données soient validées au fur et à mesure que l'utilisateur les entre et que le formulaire ne permette à l'utilisateur d'entrer que des données valides. Un masque de saisie résout ce problème.

Interface utilisateur Kendo MaskedTextBox

Un masque d'entrée est un modèle qui définit le format des valeurs d'entrée valides. Il contient les caractères de masque, qui sont des caractères représentant le type d’entrée pouvant être utilisé à sa place. Et il contient des caractères littéraux qui seront affichés tels quels. Pour ajouter un masque de saisie à une zone de texte à l'aide du composant Kendo UI MaskedTextBox vous devez uniquement créer un élément de texte et définir le masque de saisie dans la propriété mask de l'API. Ceci est un exemple utilisant les numéros de sécurité sociale:

Lorsque l'utilisateur se concentre sur le champ de texte, il verra des espaces réservés pour l'entrée. Par défaut, un trait de soulignement est utilisé. Les traits d'union que nous avons inclus dans le format sont des caractères littéraux et apparaissent dans la position que nous avons définie. Dans notre masque, un 0 signifie que tout chiffre compris entre zéro et neuf est accepté. L'utilisateur ne pourra pas entrer d'autres caractères et s'il essaye, le champ sera décoré avec une classe d'erreur. Il existe plusieurs autres règles prédéfinies pour le masque. Par exemple, L signifie que les lettres peuvent être utilisées et A signifie que les lettres et les chiffres sont acceptés. Si l'une des règles prédéfinies ne correspond pas à vos besoins, vous pouvez définir des règles de validation personnalisées dans la propriété rules .

Il convient également de mentionner le comportement du masque lors de l'édition de l'entrée. Si vous essayez de modifier un caractère après l'avoir entré, le masque ne remplace pas le caractère par la nouvelle entrée. Au lieu de cela, il déplace tous les personnages qui le suivent vers la droite. Si le numéro de sécurité sociale 123-45-6789 a été entré dans notre zone de texte masquée et que vous essayez ultérieurement de modifier le 1 à 0, la zone de texte affichera 012-34-5678.

Résumé

Utiliser des masques de saisie lorsque vos données ont une longueur fixe et un format standard. Chaque caractère du masque de saisie est un espace réservé pour la saisie utilisateur. Et chaque caractère saisi par l'utilisateur sera validé côté client pour s'assurer qu'il correspond aux règles du masque. Cela n'élimine pas la nécessité d'effectuer une validation côté serveur. Au contraire, forcer l'utilisateur à vous donner la saisie dans un format correct vous permet de mieux traiter les données car vous savez ce que vous attendez.

Le composant Kendo UI MaskedTextBox vous permet d'ajouter des masques d'entrée à toute saisie de texte. De plus, vous pouvez utiliser des expressions régulières pour créer des règles personnalisées pour chaque caractère de masque. Cependant, si la longueur de vos données ne varie pas et ne suit pas un seul format (adresses e-mail), il est préférable d’utiliser une entrée de texte et de définir un modèle d’expression régulière pour valider l’entrée. Dans l'article suivant, vous examinerez le NumericTextBox qui vous permet de formater des données strictement numériques.

Essayez le MaskedTextBox pour vous-même

Vous souhaitez commencer à tirer parti du Kendo UI jQuery MaskedTextBox ou tout autre composant d'interface utilisateur Kendo plus de 70, comme Grille ou Scheduler ? Vous pouvez commencer un essai gratuit du Kendo UI dès aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrez ma version d'essai du Kendo

Versions angulaires, réactives et de vue

Vous recherchez une MaskedTextBox pour prendre en charge des frameworks spécifiques? Consultez le MaskedTextBox pour Angular le MaskedTextBox pour React ou le MaskedTextBox pour Vue .

Ressources