Formulaires React Native : champs, validation et clavier
Guide des formulaires et de la validation React Native
Formulaires React Native : champs contrôlés et validation | We.Inc
Créez un formulaire React Native avec des TextInput contrôlés, une seule fonction validate, des messages d'erreur sous chaque champ et la gestion du clavier. Testez la validation en direct dans votre navigateur.
Un formulaire React Native fiable repose sur trois éléments : des TextInput contrôlés par le state, une seule fonction validate qui renvoie une erreur par champ, et la gestion du clavier. Affichez chaque message une fois que la personne a quitté le champ ou appuyé sur envoyer. Enveloppez l'écran dans un KeyboardAvoidingView et définissez keyboardShouldPersistTaps="handled" sur la ScrollView pour que le bouton d'envoi reste accessible.
Les éléments d'un formulaire React Native
Tâche
Outil
Stocker les valeurs
useState avec un seul objet, ou un hook par champ
Vérifier les valeurs
Une fonction pure validate(values) qui renvoie un objet d'erreurs
Afficher les erreurs
Un Text sous chaque champ, relié par accessibilityLabel ou une live region
Garder les champs visibles
KeyboardAvoidingView avec behavior="padding" sur iOS
Appuyer sur envoyer avec le clavier ouvert
keyboardShouldPersistTaps="handled" sur la ScrollView
Passer d'un champ à l'autre
returnKeyType="next" et focus() sur la ref suivante
Les règles de validation de cette page sont du JavaScript simple : l'aperçu ci-dessous exécute donc exactement la fonction que vous colleriez dans votre écran React Native. Remplissez les champs, quittez-les et appuyez sur Créer un compte pour voir chaque message apparaître puis disparaître.
Chaque champ écrit dans un seul objet values via onChangeText.
onBlur marque un champ comme touché, pour que son erreur puisse s'afficher sans interpeller quelqu'un en pleine saisie.
validate(values) s'exécute à chaque rendu et renvoie un objet avec un message par règle non respectée.
L'envoi marque tous les champs comme touchés et s'arrête si l'objet d'erreurs contient des clés.
Quand il ne reste plus d'erreur, le gestionnaire envoie les valeurs et peut appeler Keyboard.dismiss().
Gardez validate pure pour pouvoir la tester sans rien afficher et la réutiliser côté serveur.
Ne désactivez pas le bouton d'envoi tant que le formulaire est invalide : c'est en appuyant dessus que beaucoup de gens découvrent ce qui manque.
Placez le texte d'erreur juste sous son champ, avec des mots qui expliquent comment corriger le problème.
Supprimez les espaces autour des adresses e-mail avant de les vérifier : un espace final collé par erreur est la fausse erreur la plus courante.
Revérifiez tout côté serveur. Les règles côté client guident les gens mais ne sont pas fiables.
Questions fréquentes
Ai-je besoin d'une librairie de formulaires en React Native ?
Non. Quelques champs fonctionnent bien avec useState et une fonction validate comme celle de cette page. Les librairies aident quand un formulaire a beaucoup de champs, des tableaux imbriqués ou des vérifications asynchrones, et React Hook Form indique fonctionner sur le web comme dans React Native.
Comment empêcher le clavier de masquer mes champs ?
Enveloppez le formulaire dans un KeyboardAvoidingView. Il ajuste sa hauteur, sa position ou son padding inférieur en fonction du clavier ; behavior="padding" est le choix courant sur iOS. keyboardVerticalOffset tient compte d'un en-tête au-dessus de la vue et vaut 0 par défaut.
Pourquoi mon bouton d'envoi demande-t-il deux appuis ?
La prop keyboardShouldPersistTaps de la ScrollView vaut "never" par défaut, donc le premier appui ne fait que fermer le clavier. Réglez-la sur "handled" et le bouton reçoit l'appui immédiatement.
Comment fermer le clavier après l'envoi ?
Appelez Keyboard.dismiss(), qui, selon la documentation, ferme le clavier actif et retire le focus.
Quand afficher une erreur
Afficher toutes les règles en rouge dès l'ouverture de l'écran ressemble à une réprimande. Suivez les champs que la personne a touchés et ne révélez un message qu'après qu'elle a quitté ce champ, ou après une tentative d'envoi.
Une fois un message affiché, relancez la vérification à chaque frappe pour qu'il disparaisse dès que la valeur devient valide. Cette confirmation instantanée est la récompense de l'attente avant de l'afficher.
Rendre les erreurs accessibles
Une bordure rouge seule ne signifie rien pour une personne qui utilise un lecteur d'écran ou qui distingue mal les couleurs. Écrivez le problème sous forme de texte, et incluez-le dans l'accessibilityLabel du champ pour qu'il soit lu quand le focus y arrive.
Sur Android, accessibilityLiveRegion="polite" sur le Text d'erreur fait annoncer le message par TalkBack dès qu'il apparaît, sans déplacer le focus.
Code de formulaire à copier
La fonction validate
Du JavaScript simple sans import React Native : elle s'exécute dans les tests, dans l'aperçu web et sur un serveur.
Écran d'inscription avec champs touchés et gestion du clavier
Un objet values, un objet touched, et un composant Field qui n'affiche son erreur qu'au bon moment.
Saisissez votre nom.
Saisissez votre adresse e-mail.
Il manque un @ ou un domaine à cette adresse e-mail.
Utilisez au moins 8 caractères.
Les deux mots de passe ne correspondent pas.
Aperçu de la validation
Les vérifications utilisent la fonction validate du code ci-dessous. Les messages apparaissent après avoir quitté un champ ou appuyé sur le bouton.
Nom
Mot de passe
Confirmer le mot de passe
Créer un compte
Tous les champs sont valides. Une vraie app enverrait maintenant les valeurs.