Validation d’un formulaire

Création et validation d’un formulaire dans un projet standard.

Création du formulaire

Pour créer le formulaire, vous pouvez utiliser le composant VForm de Vuetify et ajouter un titre, des champs textes et un bouton de validation :

<template>
	<VForm>
		<h2 class="text-h6 font-weight-bold mb-4">
			Informations du patient
		</h2>

		<VTextField
			v-model="lastName"
			label="Nom"
			outlined
			class="vd-form-input"
		/>

		<VTextField
			v-model="firstName"
			label="Prénom"
			outlined
			class="vd-form-input mt-4"
		/>

		<VTextField
			v-model="email"
			label="Email"
			outlined
			class="vd-form-input mt-4"
		/>

		<VBtn
			large
			block
			height="56px"
			color="primary"
			class="mt-8"
		>
			Valider
		</VBtn>
	</VForm>
</template>

<script lang="ts">
	import Vue from 'vue';
	import Component from 'vue-class-component';

	@Component
	export default class UserForm extends Vue {
		lastName: string | null = null;
		firstName: string | null = null;
		email: string | null = null;
	}
</script>

Validation du formulaire

Règles de validation

Dans Vuetify, les règles de validation se présentent sous la forme d’un tableau de fonctions appliqué sur les composants via la prop rules.
Si la règle renvoie une chaîne de caractères, celle-ci est affichée comme erreur. Si la règle renvoie true, une erreur est affichée sans message. Si la règle renvoie false, aucune erreur n’est affichée.

Dans notre formulaire, vous pouvez utiliser les règles required et email de la bibliothèque de règles de Vue Dot :

import Vue from 'vue';
import Component from 'vue-class-component';

import { required } from '@cnamts/vue-dot/src/rules/required';
import { email } from '@cnamts/vue-dot/src/rules/email';

@Component
export default class UserForm extends Vue {
	lastName: string | null = null;
	firstName: string | null = null;
	email: string | null = null;

	nameRules = [
		required
	];

	emailRules = [
		required,
		email
	];
}

Ensuite, vous devez ajouter la prop rules sur chacun des champs du formulaire :

<VTextField
	v-model="email"
	:rules="emailRules"
	label="Email"
	outlined
	validate-on-blur
	class="vd-form-input mt-4"
/>

La prop validate-on-blur sert à déferrer la validation au moment où l’utilisateur sort du champ.

Vous pouvez tester la fonctionnalité implémentée en remplissant par exemple le champ email dans l’exemple ci-dessous avec une adresse email erronée :

Bouton de validation

Pour implémenter notre bouton de validation, vous pouvez appeler la méthode validate du composant VForm. Pour ce faire, vous devez ajouter une référence sur ce composant, ce qui vous permettra d’y accéder dans une méthode :

<template>
	<VForm ref="form">
		…
	</VForm>
</template>

<script lang="ts">
	import Vue from 'vue';
	import Component from 'vue-class-component';

	import { Refs, VForm } from '@cnamts/vue-dot/src/types';

	// … autres imports

	@Component
	export default class UserForm extends Vue {
		$refs!: Refs<{
			form: VForm;
		}>;

		// … variables et règles
	}
</script>

La déclaration de type $refs permet de surcharger le type par défaut d’une référence, et donc de déclarer les méthodes validate et reset sur la propriété form.

Vous pouvez maintenant appeler la méthode validate, qui va effectuer la validation du formulaire et retourner un booléen correspondant à la validité de celui-ci :

<template>
	<VForm ref="form">
		<VBtn
			large
			block
			height="56px"
			color="primary"
			class="mt-8"
			@click="submitDeclaration"
		>
			Valider
		</VBtn>
	</VForm>
</template>

<script lang="ts">
	import Vue from 'vue';
	import Component from 'vue-class-component';

	import { Refs, VForm } from '@cnamts/vue-dot/src/types';

	// … autres imports

	@Component
	export default class UserForm extends Vue {
		$refs!: Refs<{
			form: VForm;
		}>;

		// … règles de validation

		async submitDeclaration(): Promise<void> {
			await this.$nextTick();

			if (this.$refs.form.validate()) {
				// Formulaire valide
			}
		}
	}
</script>

La méthode submitDeclaration est déclarée comme asynchrone grâce au mot-clé async et son type de retour est une promesse Promise<void>.
Il est nécessaire de déclarer cette fonction comme telle pour appeler la méthode $nextTick de manière asynchrone, afin d’attendre le prochain cycle de rendu du composant et que la validation faite par Vuetify soit effective.
Sans cela, la validation ne fonctionnera pas correctement.

Maintenant, en appuyant sur le bouton de validation sans remplir correctement les champs, le formulaire est bien validé :