Introduction
Dans le développement d’applications web modernes, la validation des formulaires est cruciale pour garantir la qualité des données saisies par les utilisateurs. Nuxt.js, en tant que framework basé sur Vue.js, permet une intégration facile des bibliothèques de validation comme Vee-Validate. Cette documentation présente la création d’un formulaire d’inscription optimisé avec la validation client-side en utilisant Vee-Validate dans un projet Nuxt.js.
Prérequis
Avant de commencer, il est essentiel d’avoir un projet Nuxt.js déjà initialisé. Si ce n’est pas encore fait, vous pouvez suivre notre article sur l’initialisation d’un projet Nuxt.js 3 optimisé avec Bootstrap, qui vous guidera à travers les étapes de configuration de base.
Use Case
Nous allons mettre en œuvre un formulaire d’inscription utilisateur avec des champs tels que le nom d’utilisateur, l’adresse e-mail, le mot de passe et la confirmation de mot de passe, en garantissant que les données saisies sont validées à la perte de focus sur chaque champ et lors de la soumission du formulaire, grâce à Vee-Validate. Les règles de validation sont définies de manière stricte : le nom d’utilisateur est obligatoire, l’adresse e-mail doit être au format valide, le mot de passe doit contenir au moins 6 caractères, incluant une majuscule, une minuscule et un chiffre, et la confirmation du mot de passe doit correspondre au mot de passe. Cette approche permet de s’assurer que seules des informations conformes aux exigences de sécurité et de format sont soumises, tout en offrant une validation fluide.
Installation de Vee-Validate
Vee-Validate est une puissante bibliothèque de validation de formulaires pour Vue.js, qui simplifie considérablement la gestion des formulaires. Grâce à sa syntaxe simple et claire, elle permet d’éviter d’écrire une quantité importante de code supplémentaire pour gérer l’état des champs, la validation, les erreurs et la soumission. En fournissant des composants réactifs et des règles de validation prédéfinies, Vee-Validate réduit la complexité du développement, garantissant que les données soumises par l’utilisateur respectent les exigences spécifiques avant d’être traitées. Son intégration dans un projet est rapide et se fait via l’installation des dépendances avec la commande suivante :
yarn add @vee-validate/nuxt
Si vous souhaitez tirer parti de Yup, une bibliothèque dédiée à la validation d’objets JavaScript via des schémas flexibles et puissants, vous pouvez l’ajouter en exécutant la commande suivante :
yarn add @vee-validate/yupL’intégration de Yup avec Vee-Validate permet de définir des règles de validation avancées et structurées, offrant la possibilité de valider des types complexes (chaînes, nombres, dates, objets imbriqués) et de personnaliser les messages d’erreur.
Configuration de Vee-Validate
Pour activer les fonctionnalités de validation dans votre projet Nuxt.js, ajoutez le module Vee-Validate à votre fichier nuxt.config.ts. Cette configuration active automatiquement la validation dans toute l’application, facilitant l’utilisation des règles définies avec Yup dans vos formulaires. Voici un exemple de configuration à ajouter dans nuxt.config.ts :
export default defineNuxtConfig({
modules: [
'@vee-validate/nuxt',
],
});Création d’un Layout
Les layouts permettent de définir une mise en page commune pour plusieurs pages, comme un en-tête ou une barre de navigation. Bien que chaque page puisse hériter d’un layout par défaut, certaines, comme les pages d’authentification (inscription, connexion), peuvent nécessiter un layout personnalisé, plus épuré, recentré sur le contenu et sans distractions telles que la navigation ou le pied de page. Cela permet à l’utilisateur de se concentrer pleinement sur l’action à accomplir. Si le dossier layouts/ n’existe pas, créez-le et ajoutez-y un fichier auth.vue pour définir ce layout dédié.
<template>
<div class=" container-fluid px-0 bg-white">
<div class="row col-md-12">
<div class="col-md-6 ">
<slot />
</div>
<div class="col-md-6 vh-100 opacity-50 card text-white bg-primary d-md-down-none">
<div class="card-body d-flex justify-content-center align-items-center h-100">
<h1 class="fs-1 fw-bold text-center">POC</h1>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style>
</style>
Ce layout propose une structure simple et centrée, idéale pour les formulaires d’authentification tels que l’inscription. La balise <slot /> sert à injecter dynamiquement le contenu spécifique de chaque page, tout en maintenant une apparence cohérente. Pour utiliser ce layout, spécifiez-le dans le script de la page concernée comme suit :
<script setup>
definePageMeta({
layout: 'auth' // Using the 'auth' layout for this page
});
</script>Dans le reste de l’application, les pages non liées à l’authentification utiliseront un layout par défaut. Ce layout inclut généralement une barre de navigation, un footer, et d’autres éléments communs à plusieurs pages. Bien que nous ne le couvrions pas en détail ici, sachez que Nuxt.js permet de définir un layout global par défaut que toutes les pages peuvent utiliser si aucun layout personnalisé n’est spécifié. Ce layout est défini dans un fichier default.vue dans le répertoire layouts/.
Pour configurer correctement les layouts dans Nuxt.js, vous devez ajuster le fichier app.vue en intégrant les balises <NuxtLayout> et <NuxtPage>. <NuxtLayout> sélectionne dynamiquement le layout approprié en fonction de la page active, tandis que <NuxtPage> gère le rendu du contenu spécifique de chaque page à l’intérieur du layout. Voici un exemple de structure pour app.vue :
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Création d’un Composant de Formulaire
Pour créer et utiliser des composants dans Nuxt.js, il est important de maîtriser quelques notions clés. Les composants, qui sont des blocs réutilisables contenant HTML, CSS et JavaScript, permettent de structurer l’interface en sections modulaires et maintenables. Les composants de Nuxt.js, similaires à ceux de Vue.js, sont optimisés pour une intégration fluide dans le projet. Placés dans le dossier components/, ils sont automatiquement détectés, ce qui simplifie leur utilisation sans avoir besoin d’importations explicites. Cela favorise la réutilisabilité et facilite la maintenance.
Nous allons créer un composant d’inscription appelé SignupForm.vue, chargé de l’affichage et de la validation des données utilisateurs.
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card border-0 shadow-lg p-4">
<div class="card-body">
<v-form :validation-schema="schema" @submit="handleRegistration">
<!-- Username -->
<div class="input-group mb-3">
<span class="input-group-text"><font-awesome-icon :icon="['fas', 'user']" /></span>
<v-field name="username" type="text" class="form-control form-control-lg rounded" placeholder="Username" />
</div>
<div class="mb-3"><error-message name="username" class="text-danger"></error-message></div>
<!-- Email -->
<div class="input-group mb-3">
<span class="input-group-text"><font-awesome-icon :icon="['fas', 'envelope']" /></span>
<v-field name="email" type="email" class="form-control form-control-lg rounded" placeholder="Email" />
</div>
<div class="mb-3"><error-message name="email" class="text-danger"></error-message></div>
<!-- Password -->
<div class="input-group mb-3">
<span class="input-group-text"><font-awesome-icon :icon="['fas', 'lock']" /></span>
<v-field
name="password"
:type="showPassword ? 'text' : 'password'"
class="form-control form-control-lg rounded"
placeholder="Password"
/>
<span class="input-group-text" @click="togglePasswordVisibility">
<font-awesome-icon :icon="showPassword ? ['fas', 'eye-slash'] : ['fas', 'eye']" />
</span>
</div>
<div class="mb-3"><error-message name="password" class="text-danger"></error-message></div>
<!-- Confirm Password -->
<div class="input-group mb-3">
<span class="input-group-text"><font-awesome-icon :icon="['fas', 'lock']" /></span>
<v-field
name="confirmPassword"
:type="showConfirmPassword ? 'text' : 'password'"
class="form-control form-control-lg rounded"
placeholder="Confirm Password"
/>
<span class="input-group-text" @click="toggleConfirmPasswordVisibility">
<font-awesome-icon :icon="showConfirmPassword ? ['fas', 'eye-slash'] : ['fas', 'eye']" />
</span>
</div>
<div class="mb-3"><error-message name="confirmPassword" class="text-danger"></error-message></div>
<!-- Registration and Already Have Account Buttons -->
<div class="row">
<button type="submit" class="btn btn-primary px-4" :disabled="isLoading ">
<span v-if="isLoading">
<font-awesome-icon icon="spinner" spin />
Loading...
</span>
<span v-else>
Register
</span>
</button>
<div class="text-right">
<span>Already have an account? </span>
<button type="button" class="btn btn-link px-0">Log in</button>
</div>
</div>
</v-form>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>
Ce composant exploite v-form et v-field de Vee-Validate pour gérer la validation des formulaires de manière efficace et structurée. v-form englobe tout le formulaire, prenant automatiquement en charge l’état des champs, la validation et la soumission, simplifiant ainsi considérablement le code et évitant de gérer manuellement ces aspects. Chaque champ du formulaire est lié à des règles de validation spécifiques via v-field, qui applique directement les validations définies par Yup. Par exemple, les champs username, email, password et confirmPassword sont associés à leurs règles de validation spécifiques.
Les erreurs sont affichées grâce au composant error-message, offrant un retour visuel immédiat à l’utilisateur lorsqu’il quitte un champ ou soumet le formulaire. Lors de la soumission la fonction handleRegistration est appelée pour traiter les données. Le bouton de soumission affiche un indicateur de chargement pendant le traitement des données, informant l’utilisateur que l’action est en cours. De plus, des fonctionnalités comme l’icône d’œil pour afficher ou masquer les mots de passe améliorent l’ergonomie et renforcent la sécurité, rendant l’expérience utilisateur plus fluide et intuitive.
Validation du Formulaire
La validation du formulaire d’inscription utilise Vee-Validate et Yup pour établir des règles telles que l’obligation de saisir un nom, un e-mail valide, un mot de passe d’au moins 6 caractères (incluant au moins une majuscule, une minuscule et un chiffre) et une confirmation de mot de passe. Le script ci-dessous, qui prolonge le composant SignupForm.vue, est chargé de valider les données d’inscription.
<script setup>
import * as Yup from 'yup';
import { Form as VForm, Field as VField, ErrorMessage, useForm } from 'vee-validate';
import { ref } from 'vue';
// Validation schema with Yup
const schema = Yup.object().shape({
username: Yup.string().required("Username is required."),
email: Yup.string().email("Invalid email address.").required("Email is required."),
password: Yup.string()
.required("Password is required.")
.matches(
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$/,
"Password must have at least 6 characters, including one uppercase, one lowercase, and one number."
),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], "Passwords do not match.")
.required("Password confirmation is required."),
});
// States for handling password visibility and loading state
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const isLoading = ref(false);
// Function to toggle password visibility
const togglePasswordVisibility = () => {
showPassword.value = !showPassword.value;
};
// Function to toggle confirm password visibility
const toggleConfirmPasswordVisibility = () => {
showConfirmPassword.value = !showConfirmPassword.value;
};
// Form submission handler with popup and simulated API call
const handleRegistration = async (values) => {
isLoading.value = true;
try {
await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate an API call
alert(`Registration successful! Username: ${values.username}, Email: ${values.email}`);
} finally {
isLoading.value = false;
}
};
</script>Ce script définit un schéma de validation pour les champs username, email, password, et confirmPassword, spécifiant les règles requises pour chaque champ. Trois variables réactives, showPassword, showConfirmPassword, et isLoading, gèrent l’état du formulaire, notamment la visibilité des mots de passe et l’indicateur de chargement lors de la soumission. Les fonctions togglePasswordVisibility et toggleConfirmPasswordVisibility permettent d’afficher ou de masquer les mots de passe, tandis que la fonction handleRegistration simule une soumission d’API et affiche une alerte avec les informations saisies en cas de succès, tout en affichant un indicateur de chargement pendant le processus.
Une fois le composant SignupForm.vue développé et finalisé, vous pouvez l’intégrer facilement dans n’importe quelle page de votre application en utilisant la balise <SignupForm />. Si le composant se trouve dans un sous-dossier du répertoire components/, vous devez préfixer le nom de la balise avec le nom de ce sous-dossier, par exemple, <SousDossier/SignupForm />. De plus, si vous avez un fichier index.vue dans ce sous-dossier, vous pouvez l’inclure dans vos pages simplement en utilisant le nom du sous-dossier, sans avoir à spécifier le fichier. Cela simplifie l’importation et l’utilisation des composants, rendant votre code plus organisé et lisible.
Création de la Page d’Inscription
Le répertoire pages/ permet de définir les routes de votre application de manière structurée et intuitive. Chaque fichier ou sous-dossier dans ce répertoire correspond à une route spécifique, facilitant ainsi la création de pages. Par exemple, un fichier index.vue placé dans pages/ correspond à la racine de votre application, tandis qu’un fichier about.vue créera la route /about. De plus, Nuxt.js prend en charge les routes dynamiques ; si vous avez un sous-dossier users/ avec un fichier [id].vue à l’intérieur, cela vous permettra de créer des routes comme /users/1, /users/2, etc., où id représente une variable dynamique. Dans le cas de notre formulaire d’inscription, nous allons créer un fichier signup.vue dans le répertoire pages/, dont le contenu est le suivant :
<template>
<div class="container mt-5">
<h1 class="text-center mb-4">Sign Up</h1>
<SignupForm />
</div>
</template>
<script setup>
definePageMeta({
layout: 'auth' // Using the 'auth' layout for this page
});
</script>Ce fichier définit une page d’inscription simple qui utilise le composant SignupForm et applique le layout d’authentification, garantissant ainsi une expérience utilisateur optimale et sans distractions lors du processus d’inscription.
Test
Pour tester la page d’inscription, vous pouvez démarrer votre application Nuxt.js en utilisant la commande yarn dev. Une fois le serveur de développement en cours d’exécution, accédez à http://localhost:3000/signup dans votre navigateur. Vous devriez voir la page d’inscription avec le titre et le formulaire. Testez les différentes validations en remplissant le formulaire avec des informations valides et invalides pour vous assurer que tout fonctionne comme prévu. Assurez-vous également que la mise en page s’affiche correctement en fonction du layout d’authentification appliqué.
Démonstration de la saisie d’informations valides
Démonstration de la saisie d’informations invalides
Conclusion
L’ajout de Vee-Validate à un projet Nuxt.js permet de simplifier la validation des formulaires tout en offrant une interface réactive et élégante grâce à l’intégration de Bootstrap. Cette approche garantit que vos utilisateurs soumettent des informations conformes et valides, tout en profitant d’une expérience utilisateur optimale. De plus, l’utilisation de schémas de validation avec Yup renforce la robustesse de votre application en définissant des règles claires pour chaque champ, ce qui minimise les erreurs de saisie. En intégrant des composants réutilisables comme SignupForm, vous favorisez également la modularité et la maintenabilité de votre code. Ainsi, en combinant ces technologies, vous créez non seulement des formulaires fonctionnels et esthétiques, mais vous optimisez également le processus d’inscription, ce qui peut conduire à une augmentation de la satisfaction et de l’engagement des utilisateurs.
Développeuse Full-Stack avec une spécialisation dans les technologies web et une solide compréhension des enjeux climatiques. Diplômée de l'université Joseph Ki-Zerbo, Ouagadougou, Burkina en Informatique et Changement Climatique. Passionné par la création de solutions innovantes pour lutter contre le changement climatique. Compétences avancées en programmation et en analyse de données, associées à une expérience approfondie dans la modélisation climatique et la recherche scientifique.
