Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Étiquette : décrit l'objectif d'un champ de saisie.
Texte d'aide : fournit un contexte supplémentaire, des conseils ou des informations utiles pour aider l'utilisateur. Souvent utilisé pour expliquer des exigences spécifiques permettant de remplir correctement un champ.
Champ de saisie du numéro de téléphone : champ amélioré qui permet aux utilisateurs d'entrer leur numéro de téléphone. Il n'accepte que des entrées numériques et est automatiquement formaté.
Sélecteur de code pays (facultatif) : liste déroulante qui permet de sélectionner des codes pays dans une liste. Le code est précédé du drapeau du pays associé pour faciliter la reconnaissance.
Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
Utilisez des verbes au présent et la forme active dans la plupart des cas.
Placez une étiquette claire et visible à l'extérieur du champ de saisie du téléphone. Un champ de saisie sans étiquette est ambigu et ne permet pas l'accessibilité.
Placez une étiquette permanente en dehors du champ.
Ne supposez pas que le champ est explicite sans étiquette.
Utilisez le texte d'aide pour fournir des informations sur les éléments à saisir et la façon de le faire. Voici quelques exemples de ce que vous pouvez inclure dans le texte d'aide :
Contexte pour aider l'utilisateur, par exemple la façon dont les informations seront utilisées
Conseils sur le type d'informations contenues dans le champ de saisie
Exemples de formatage ou exigences
N'utilisez le texte d'aide que pour les informations pertinentes. Évitez d'utiliser un texte d'aide qui reformule simplement les mêmes informations que celles qui apparaissent dans l'étiquette.
Mettez la première lettre de la phrase en majuscule pour le texte d'aide. Rédigez le texte d'aide sous la forme de 1 ou 2 phrases courtes et complètes se terminant par un point. Lorsque vous affichez des exemples de mise en forme, vous n'avez pas besoin de mettre un point final.
Utilisez le texte d'aide pour fournir une aide ou un contexte supplémentaire à l'utilisateur.
N'utilisez pas le texte d'aide pour simplement reformuler les mêmes informations que celles qui apparaissent dans l'étiquette.
Ne mettez pas de texte d'espace réservé dans le champ de saisie du téléphone. Un texte d'espace réservé sollicite la mémoire à court terme des utilisateurs, car il disparaît une fois qu'une valeur est entrée. Il représente également un fardeau supplémentaire pour les utilisateurs souffrant de troubles visuels et cognitifs.
Placez donc plutôt les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ.
Placez les conseils et les instructions, y compris les exemples de formatage et les exigences, en dehors du champ.
N'ajoutez pas d'espaces réservés au champ de saisie de numéro de téléphone.
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Dans le cas du champ de saisie du téléphone, les erreurs sont souvent liées à quelque chose qui doit être corrigé pour la validation en ligne. Par exemple, si l'utilisateur ne remplit pas un champ obligatoire qui demande son numéro de téléphone, vous pouvez utiliser un texte d'erreur pour le guider vers une solution : « Entrez votre numéro de téléphone ».
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Utilisez le texte d'erreur pour guider l'utilisateur et lui proposer une solution.
Ne rédigez pas de messages d'erreur ambigus ou ne laissez pas les utilisateurs deviner comment résoudre un problème.
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Utilisez un astérisque pour signaler qu'un champ est obligatoire.
N'utilisez pas d'astérisque pour signaler quelque chose qui est facultatif.
Le champ de saisie du numéro de téléphone apparaît sans valeur (par défaut), avec un texte d'espace réservé ou avec une entrée renseignée.
Visuel
État
Description
Aucune valeur (par défaut)
Indique à l'utilisateur qu'aucune valeur n'a été sélectionnée et qu'il n'y a pas d'espace réservé.
Espace réservé
Indique à l'utilisateur qu'aucune valeur n'a été saisie. L'espace réservé est grisé.
Entrée renseignée
Indique à l'utilisateur que l'entrée est renseignée.
Les champs de saisie du numéro de téléphone ont également des états interactifs : activé, focus, désactivé, erreur, lecture seule ** et affichage seul.**
État
Description
Activé
Indique à l'utilisateur que l'élément est prêt à interagir.
Focus
Indique à l'utilisateur l'élément de l'interface utilisateur sur lequel le système est centré.
Désactivé
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page.
Erreur
Indique que l'utilisateur a commis une erreur de validation. Le texte d'erreur permet aux utilisateurs d'apporter une correction.
Lecture seule
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur.
Affichage uniquement
L'état Affichage uniquement est utilisé dans deux cas :
Un élément d'interface utilisateur est utilisé en mode affichage.
Un élément d'interface utilisateur est affiché en mode édition, mais il n'est jamais modifiable.
Cet état était auparavant appelé « lecture seule ».
L'utilisateur peut saisir le numéro de téléphone en sélectionnant la zone de saisie ou en déplaçant le focus dessus. Les entrées sont formatées lorsque la mise en évidence est effectuée.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Lorsque vous utilisez ce composant dans votre application, assurez-vous que les étiquettes et les instructions sont pertinentes et concises. Fournissez des instructions supplémentaires si nécessaire.
Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Initial value of input. If value prop is specified along with this prop, this prop's value is discarded. Accepts object with phoneNumber and optionally countryCode.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes. Accepts object with phoneNumber and optionally countryCode.
Plusieurs clés de traduction sont associées au composant PhoneInput, mais elles peuvent être regroupées en deux groupes : espace réservé par défaut et noms de pays.
Voici la liste des codes pays que vous pouvez utiliser avec la clé de traduction ci-dessus :
ac ad ae af ag ai al am ao ar as at au aw ax az ba bb be bf bg bh bi bj bl bm bn bo bq br bs bt bw by bz ca cc cd cf cg ch ci ck cl cm cn co cr cu cv cw cx cy cz de dj dk dm do dz ec ee eg eh er es et fi fj fk fm fo fr ga gb gd ge gf gg gh gi gl gm gn gp gq gr gt gu gw gy hk hn hr ht hu id ie il im in io iq ir is it je jm jo jp ke kg kh ki km kn kp kr kw ky kz la lb lc li lk lr ls lt lu lv ly ma mc md me mf mg mh mk ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nc ne nf ng ni nl no np nr nu nz om pa pe pf pg ph pk pl pm pr ps pt pw py qa re ro rs ru rw sa sb sc sd se sg sh si sj sk sl sm sn so sr ss st sv sx sy sz tc td tg th tj tk tl tm tn to tr tt tv tw tz ua ug us uy uz va vc ve vg vi vn vu wf ws xk ye yt za zm zw
Les entrées Jutro ont implémenté des gestionnaires impératifs en tant que mécanisme permettant d'accéder à certaines fonctionnalités natives communes susceptibles de vous être utiles. Les fonctionnalités suivantes sont disponibles :
Définir le focus pour vous permettre de définir le focus utilisateur dans un composant spécifique
Flou pour supprimer le focus du composant
Faire défiler l'écran jusqu'au composant pour pouvoir amener l'utilisateur à une zone spécifique de la page.
Ces fonctionnalités sont fournies via la propriété ref, qui les expose comme suit :
La validation et le formatage des numéros de téléphone évoluent constamment pour s'adapter aux nouvelles règles définies par chaque pays. PhoneNumberInput est conçu pour prendre en charge ces normes et est mis à jour pour refléter les nouvelles règles à mesure de leur apparition. Ces mises à jour peuvent modifier le comportement du composant pour prendre en charge les exigences de règles spécifiques.
Espace réservé automatique pour le pays sélectionné
Sauf si la propriété placeholder est définie, PhoneNumberInput définit automatiquement l'espace réservé d'entrée sur un exemple de numéro pour le pays sélectionné.
Lorsque le code pays est saisi dans la saisie du numéro de téléphone, il est automatiquement utilisé pour définir la valeur du sélecteur de pays et le code est supprimé de la saisie du numéro. Si un code non valide est utilisé, la modification automatique ne sera pas appliquée.
Bien que vous soyez responsable de la gestion des erreurs, le composant PhoneNumberInput dispose de certains mécanismes internes de validation et de transformation, dont les résultats sont mis à votre disposition pour prendre en charge le processus de validation.
L'événement onChange fournit un troisième paramètre avec le résultat de la validation effectuée, un objet contenant une valeur numérique errorCode qui identifie le problème afin que vous puissiez le mapper à un message d'erreur personnalisé.
La logique de validation errorCode est effectuée en transmettant le code à la bibliothèque intl-tel-input, qui peut être mise à jour indépendamment.
Voici la synthèse des codes d'erreur :
Code
Type d'erreur
-99
Erreur inconnue
-1
Numéro de téléphone non valide pour le pays sélectionné
1
Code pays non valide
2
Le numéro de téléphone est trop court
3
Le numéro de téléphone est trop long
4
Seul le numéro local est autorisé
5
Longueur non valide
Reportez-vous à la section Exemples pour obtenir un exemple de code.
Bien que certains composants de Jutro puissent fournir des fonctionnalités complémentaires ou une fonction d'aide pour faciliter le processus de validation, il vous appartient, en tant que développeur, de gérer la validation de toute entrée utilisateur (en utilisant ou non les fonctions d'aide complémentaires) et de déterminer les messages d'erreur à afficher.
Le comportement des composants Jutro est basé sur l'implémentation du développeur.
Quand est-ce que des messages d'erreur s'affichent ?
Les messages d'erreur ne s'affichent que lorsque vous les transmettez au composant via la propriété stateMessages. Cette propriété reçoit un objet avec le contenu suivant :
Le composant affiche chaque message d'erreur fourni dans le même ordre que dans la série.
Quand la validation a-t-elle lieu ?
Cette décision vous revient en tant que développeur. Étant donné que les composants ne déterminent pas le moment où la validation est effectuée ou le moment où l'erreur doit être affichée, vous devez implémenter la logique pour la traiter en fonction des exigences du projet, par exemple lorsque l'utilisateur modifie le contenu, lorsque le composant active une autre fenêtre et lors de la soumission du formulaire.
Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.
Bien que vous ne soyez pas obligé de transmettre un code de pays au PhoneNumberInput, le composant ne se comportera pas comme une entrée de numéro de téléphone sans code de pays. Vous disposez de 3 options différentes pour le fournir :
Utilisation de la propriété countries : vous pouvez transmettre un code pays ISO unique qui sera utilisé par défaut et le code numérique du pays sera affiché.
<PhoneNumberInput label="Phone input component with US set as default" countries={['US']} />
Utilisation de la propriété initialValue : cela initialise le composant de saisie et n'affiche pas le code numérique du pays. Les fonctionnalités liées au téléphone, cependant, fonctionneront normalement.
Utilisation de la propriété value : cela permet de contrôler le composant. Le composant est initialisé et n'affiche pas le code numérique du pays. Les fonctionnalités liées au téléphone, cependant, fonctionneront normalement.
Saisie de numéro de téléphone avec plusieurs codes pays
Le composant PhoneNumberInput affiche un sélecteur déroulant pour les codes pays lorsque vous spécifiez plus d'un code pays ISO dans la propriété countries. Si vous ne fournissez pas de initialValue, le premier code pays de la série correspond à la valeur initiale affichée dans la liste déroulante.
Numéro de téléphone de base avec espace réservé personnalisé
Le composant PhoneNumberInput gère l'espace réservé à afficher en fonction du pays sélectionné. Vous pouvez toutefois le remplacer et définir un espace réservé personnalisé.
<PhoneNumberInput label="Phone input component with a custom placeholder" countries={['PL','US']} placeholder="this is a custom placeholder" />
Validation de la saisie de numéros de téléphone en cas de changement
Le composant PhoneNumberInput ne fournit pas de logique de validation spécifique, mais il permet d'inclure la validation du développeur et d'utiliser la propriété stateMessages pour afficher tout message d'erreur requis.
Il s'agit d'un exemple de traitement de la validation lorsque l'événement onChange est déclenché.
exportfunctionPhoneNumberInputValidation(){ const[validationMessages, setValidationMessages]=useState({}); const onChange =useCallback((e, newValue, errorCode)=>{ const componentPhoneNumber = newValue.phoneNumber; const componentCountryCode = newValue.countryCode; const componentErrorCode = errorCode?.errorCode; setValidationMessages({}); if(componentErrorCode && componentErrorCode !=0){ setValidationMessages({ error:['The phone number is not correct'], }); }else{ if( componentPhoneNumber && componentCountryCode && componentCountryCode =='ES'&& componentPhoneNumber.indexOf('6')==0 ){ setValidationMessages({ error:['Only landline numbers are accepted for Spain'], }); } } },[]); return( <PhoneNumberInput countries={['ES','US']} label="Accepts any US number but accepts only landline numbers for Spain" secondaryLabel="Landline numbers cannot start by 6" stateMessages={validationMessages} onChange={onChange} /> ); }
Utilisation de ref pour définir le focus (gestionnaire impératif)
PhoneNumberInput et d'autres entrées permettent d'utiliser une propriété ref pour accéder à certains comportements natifs. Toutefois, seules certaines fonctions sont exposées. Dans cet exemple, lorsque vous cliquez sur le bouton, le focus est automatiquement placé dans l'entrée ci-dessous.
exportfunctionPhoneNumberRef(){ const inputRef =useRef(null); constsetFocus=(e)=>{ inputRef?.current?.focus(); }; return( <div> <Button label="Set the focus on input" onClick={setFocus}></Button> <PhoneNumberInput label="Get the focus from the button" countries={['ES','US']} ref={inputRef} /> </div> ); }
Un nouveau composant @jutro/components/PhoneNumberInput a été introduit pour remplacer PhoneNumberField et IntlPhoneNumberField.
Les anciens composants liés au téléphone (PhoneNumberField et IntlPhoneNumberField) sont désormais obsolètes et ont été déplacés vers le package @jutro/legacy. Pour consulter la documentation correspondante, passez à une version de la documentation antérieure à 10.0.
