La validation de données est une étape essentielle dans le développement d’applications web modernes, car elle garantit la fiabilité et la sécurité des informations que les utilisateurs saisissent. Parmi les nombreuses bibliothèques disponibles, Yup est largement adoptée pour sa facilité d’utilisation, sa flexibilité et son intégration transparente avec des outils comme React Hook Form.
1. Introduction à Yup
Yup est une bibliothèque JavaScript qui permet de définir des schémas de validation de manière déclarative. Grâce à des fonctionnalités puissantes comme les types de données personnalisés, les messages d’erreur spécifiques et les schémas d’objet, Yup aide les développeurs à maintenir le contrôle sur la qualité des données, en validant les formulaires de manière intuitive et efficace.
2. Pourquoi Utiliser Yup pour la Validation de Données ?
Avant de plonger dans le code, il est utile de comprendre pourquoi Yup est si apprécié des développeurs.
Tout d’abord, Yup est intuitif et très flexible. Il permet aux développeurs de définir des schémas de validation complexes sans avoir à écrire des centaines de lignes de code. Ensuite, il est compatible avec de nombreux frameworks, notamment React, et fonctionne très bien avec React Hook Form pour une gestion simplifiée des formulaires.
En outre, les fonctionnalités avancées de Yup, telles que .reach(), .ref() et .clone(), permettent une personnalisation poussée des schémas de validation, facilitant la création de règles complexes et l’adaptation aux besoins spécifiques de chaque application.
3. Créer des Schémas de Validation avec Yup
Le principe de Yup repose sur la création de schémas de validation. Ces schémas définissent les règles auxquelles les données doivent se conformer avant de passer à l’étape suivante de traitement.
Prenons un exemple pratique en créant un schéma de validation utilisateur :
import * as yup from 'yup';export const userSchema = yup.object({
name: yup.string()
.required("Le nom est requis")
.min(3, 'Le nom doit comporter au moins 3 caractères')
.max(5, 'Le nom doit comporter moins de 5 caractères'),
age: yup.number()
.required("L'âge est requis")
.positive("L'âge doit être positif")
.integer("L'âge doit être un entier"),
email: yup.string().email("L'email doit être valide"),
website: yup.string().url("L'URL doit être valide").nullable(),
createdOn: yup.date().default(() => new Date()),
sex: yup.mixed().oneOf(['Homme', 'Femme', 'Autres']).defined(),
tel: yup.string()
.matches(/^(0|\+33)[1-9]\d{8}$/, 'Le numéro de téléphone doit commencer par 0 ou +33 et comporter 10 chiffres')
.required("Le numéro de téléphone est requis"),
address: yup.object().shape({
street: yup.string().required(),
city: yup.string().required(),
postalCode: yup.string().required(),
}),
});
name : Doit être une chaîne de caractères d’une longueur comprise entre 3 et 5 caractères.
age : Doit être un nombre positif et un entier.
email : Doit respecter le format d’une adresse e-mail.
website : Valide une URL et permet la valeur null avec .nullable().
createdOn : Définit une date par défaut avec .default().
sex : Utilise .oneOf() pour restreindre les valeurs acceptables.
tel : Valide le format de numéro français avec .matches().
4. Fonctions Avancées de Yup : Reach, Ref, et Clone
.reach()
La fonction .reach() est utile lorsqu’on souhaite accéder à un sous-champ d’un schéma sans devoir reconstruire entièrement le schéma. Elle est très pratique pour les validations dynamiques ou conditionnelles.
const field = yup.reach(userSchema, 'address.city');.ref()
La fonction .ref() est utilisée pour référencer d’autres champs dans le schéma. Cela s’avère utile lorsqu’une règle de validation dépend de la valeur d’un autre champ.
.clone()
La méthode .clone() de Yup permet de dupliquer un schéma existant sans le modifier, ce qui est utile si vous avez besoin de schémas similaires avec de légères variations.
5. Validation et Exemples de Schémas
Pour utiliser un schéma Yup et vérifier les données, vous pouvez utiliser la méthode .validate(), qui retourne une promesse. Si la validation échoue, Yup déclenche une erreur contenant le message spécifié.
userSchema.validate({
name: 'John',
age: 25,
email: 'john@example.com',
website: 'https://example.com',
createdOn: new Date(),
sex: 'Homme',
tel: '0123456789',
address: {
street: '123 Main St',
city: 'Paris',
postalCode: '75001',
}
})
.then((data) => console.log("Validation réussie:", data))
.catch((err) => console.error("Erreur de validation:", err.errors));
6. Intégration de Yup avec React Hook Form
Intégrer Yup avec React Hook Form simplifie grandement la gestion des formulaires dans React. Cela permet d’utiliser les schémas de validation Yup directement avec la logique de React Hook Form.
Code Complet avec React Hook Form
Voici comment utiliser le schéma userSchema que nous avons défini avec React Hook Form.
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { userSchema } from '@/app/schemas/yupSchema';
import { InferType } from 'yup';type User = InferType<typeof userSchema>;export default function Home() {
const { register, handleSubmit, formState: { errors } } = useForm<User>({
resolver: yupResolver(userSchema),
});const onSubmit = (data: User) => {
console.log(data);
};return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('name')} placeholder="Nom" />
{errors.name && <p>{errors.name.message}</p>}
<input {...register('age')} placeholder="Âge" type="number" />
{errors.age && <p>{errors.age.message}</p>}<input {...register('email')} placeholder="Email" type="email" />
{errors.email && <p>{errors.email.message}</p>}<input {...register('website')} placeholder="Site web" />
{errors.website && <p>{errors.website.message}</p>}<input type="submit" />
</form>
);
}
register : Permet de lier les champs du formulaire avec les validations du schéma.
handleSubmit : Gère la soumission du formulaire en déclenchant la validation des données.
formState.errors : Accède aux erreurs de validation et affiche les messages définis dans le schéma Yup
7. Exemple de Code Complet
Le code suivant regroupe l’ensemble des fonctionnalités vues jusqu’ici, avec une configuration complète de Yup et React Hook Form.
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';const userSchema = yup.object({
// (ajouter le schéma complet ici)
});function App() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(userSchema),
});const onSubmit = data => {
console.log(data);
};return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* Ajouter les champs du formulaire et gérer les erreurs */}
</form>
);
}export default App;
8. Conclusion
En conclusion, Yup, associé à React Hook Form, est une solution puissante pour gérer la validation des données dans vos applications React. Si vous souhaitez aller plus loin et approfondir vos compétences en développement front-end, découvrez mes formations sur React.js, Next.js et TypeScript, conçues pour vous faire progresser de manière structurée et efficace !
Excellent Article mais est-on « obligé » d’utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en place est plutôt simple en tout cas !
Hello Gregory,
Merci pour ton retour et ton soutien,
Pour répondre à t’as question, non tu peut utiliser Yup sans React Hook Form et l’intégrer avec tous autres bibliothèque javascript qui le supporte ou sans aucune bibliothèque.
bien à toi
Jonathan