Avez-vous déjà essayé de soumettre un formulaire, uniquement pour que la page Web vous donne un message d'erreur vous indiquant qu'un ou plusieurs des champs sont invalides? Si oui, alors vous avez expérimenté la validation de formulaire.
La validation est souvent essentielle pour obtenir des données propres et utilisables. Des adresses e-mail aux dates, si elles doivent être exactes, vous devez les vérifier attentivement.
Qu'est-ce que la validation de formulaire ?
La validation de formulaire est le processus qui permet de s'assurer que les données saisies dans un formulaire par un utilisateur sont correctes et complètes. Vous pouvez le faire côté client, en utilisant des fonctionnalités HTML intégrées telles que l'attribut required. Vous pouvez aussi valider sur le client en utilisant JavaScript, et il existe des bibliothèques Next.js externes pour faciliter le processus.
Il existe plusieurs raisons pour lesquelles la validation de formulaire est essentielle. Tout d'abord, cela permet de s'assurer que les données saisies dans un formulaire sont complètes et correctes. Ceci est important car cela permet d'éviter les erreurs lorsque votre application soumet des données à un serveur ou à une base de données.
Deuxièmement, la validation de formulaire peut aider à améliorer la convivialité d'un formulaire en fournissant des commentaires lorsqu'un utilisateur saisit des données non valides. Cela peut aider à éviter la frustration et la confusion de la part de l'utilisateur.
Enfin, la validation de formulaire peut aider à améliorer la sécurité d'un formulaire en s'assurant qu'il ne soumet que des données valides.
Comment valider des formulaires dans Next.js
Il existe deux façons de valider les formulaires dans Next.js: en utilisant les méthodes intégrées ou en utilisant des bibliothèques externes.
Utilisation des méthodes intégrées
HTML fournit plusieurs méthodes pour valider les formulaires, dont la plus courante est la requis attribut. Cela garantit qu'un champ ne peut pas être vide. Vous pouvez utiliser cette méthode depuis votre application Next.js, simplement en incluant l'attribut dans les balises d'entrée que vous générez. HTML fournit également un modèle attribut. Vous pouvez l'utiliser avec un expression régulière pour une validation plus complexe.
Cet exemple comprend un formulaire avec deux champs: nom et e-mail. Le champ du nom est obligatoire et le champ de l'e-mail doit correspondre à une expression régulière.
importer Réagir depuis 'réagir'classeMonFormulaires'étendRéagir.Composant{
rendre() {
retour (
<former >
<étiqueter>
Nom:
<type d'entrée="texte" nom="nom" requis />
</label>
<étiqueter>
E-mail:
<type d'entrée="e-mail" nom="e-mail"
motif="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<type d'entrée="soumettre" valeur="Soumettre" />
</form>
)
}
}
exporterdéfaut MonFormulaire
Ce code importe la bibliothèque React, puis crée une classe appelée MyForm et restitue un élément de formulaire. À l'intérieur de l'élément form, il y a deux éléments label.
Le premier élément d'étiquette contient un champ de saisie de texte obligatoire. Le deuxième élément d'étiquette contient un champ de saisie d'e-mail avec une expression régulière dans son attribut de modèle.
Enfin, vous avez un bouton de soumission. Lorsqu'un utilisateur soumet le formulaire, l'attribut required garantit qu'il a rempli le champ de nom. L'attribut pattern du champ email garantit que l'email est dans le format spécifié. Si l'une de ces conditions échoue, le formulaire ne sera pas soumis.
Il y a quelques inconvénients à utiliser les méthodes intégrées. Tout d'abord, il peut être difficile de garder une trace de toutes les différentes règles de validation que vous avez configurées. Deuxièmement, si vous avez beaucoup de champs, il peut être fastidieux d'ajouter l'attribut requis à chacun. Enfin, les méthodes intégrées ne fournissent qu'une validation de base. Si vous souhaitez effectuer une validation plus complexe, vous devrez utiliser une bibliothèque externe.
Utilisation d'une bibliothèque externe
Outre les méthodes intégrées, il existe également de nombreuses bibliothèques externes que vous pouvez utiliser pour valider les formulaires. Certaines bibliothèques populaires incluent Formik, react-hook-form et Yup.
Pour utiliser une bibliothèque externe, vous devez d'abord l'installer. Par exemple, pour installer Formik, exécutez la commande suivante :
npm installer formikUne fois la bibliothèque installée, vous pouvez l'importer dans votre composant et l'utiliser pour valider votre formulaire :
importer Réagir depuis 'réagir'
importer { Formik, Formulaire, Champ } depuis 'formik'constante MonFormulaire = () => (
<Formulaire
Valeursinitiales={{ nom: '', e-mail: '' }}
valider={valeurs => {
constante erreurs = {}
si (!valeurs.nom) {
erreurs.nom = 'Requis'
}
si (!valeurs.e-mail) {
erreurs.email = 'Requis'
} autresi (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (valeurs.email)
) {
erreurs.email = 'Adresse e-mail invalide'
}
retour les erreurs
}}
onSubmit={(valeurs, { setSubmitting }) => {
setTimeout(() => {
alerte(JSON.stringify (valeurs, nul, 2))
setEnvoi(FAUX)
}, 400)
}}
>
{({ isSubmitting }) => (
<Former>
<Type de champ="texte" nom="nom" />
<Type de champ="e-mail" nom="e-mail" />
<type de bouton="soumettre" disabled={isSubmitting}>
Soumettre
</button>
</Form>
)}
</Formik>
)
exporterdéfaut MonFormulaire
Ici, vous importez d'abord le Formulaire, Former, et Champ composants de la bibliothèque Formik. Ensuite, créez un composant appelé MyForm. Ce composant rend un formulaire qui a deux champs: nom et e-mail.
La prop initialValues définit les valeurs initiales des champs de formulaire. Dans ce cas, les champs de nom et d'e-mail sont tous deux des chaînes vides.
La prop validate définit les règles de validation pour les champs du formulaire. Dans ce cas, le champ du nom est obligatoire et le champ de l'e-mail doit correspondre à une expression régulière.
Le prop onSubmit définit la fonction que React appellera lorsque l'utilisateur soumettra le formulaire. Dans ce cas, la fonction est une alerte qui affichera les valeurs des champs du formulaire.
Le prop isSubmitting détermine si le formulaire est actuellement soumis. Dans ce cas, vous le définissez sur false.
Enfin, rendez le formulaire à l'aide du composant Form de Formik.
Avantages de l'utilisation de bibliothèques externes dans Next.js
Il y a plusieurs avantages à utiliser une bibliothèque externe comme Formik pour valider les formulaires dans Next.js. L'un des avantages est qu'il est beaucoup plus facile d'afficher des messages d'erreur à l'utilisateur. Par exemple, si un champ obligatoire n'est pas rempli, Formik affichera automatiquement un message d'erreur incluant une suggestion de correctif.
Un autre avantage est que Formik peut gérer des règles de validation plus complexes. Par exemple, vous pouvez utiliser Formik pour valider que deux champs sont identiques (comme un mot de passe et un champ de confirmation de mot de passe).
Enfin, Formik facilite la soumission des données du formulaire à un serveur. Par exemple, vous pouvez utiliser Formik pour soumettre les données du formulaire à une API.
Augmentez l'engagement des utilisateurs à l'aide de formulaires
Vous pouvez utiliser des formulaires pour augmenter l'engagement des utilisateurs. En fournissant des commentaires lorsqu'un utilisateur saisit des données non valides, vous pouvez aider à éviter la frustration et la confusion.
À l'aide de bibliothèques externes, vous pouvez ajouter des fonctionnalités telles que l'auto-complétion et les champs conditionnels. Ceux-ci peuvent aider à rendre vos formulaires encore plus conviviaux. Lorsqu'ils sont utilisés correctement, les formulaires peuvent être un outil puissant pour vous aider à accroître l'engagement des utilisateurs et à collecter les données dont vous avez besoin.
Outre la validation, Next.js possède de nombreuses fonctionnalités que vous pouvez utiliser pour augmenter l'engagement des utilisateurs.
