2. Validation de formulaire
La plupart du temps, les données envoyées par des formulaires ont besoin d'être validées par le serveur avant d'être utilisées.
SvelteKit permet de renvoyer des données depuis les actions, de cette manière :
Données de formulaire
// +page.server.ts
export const actions = {
default: () => {
return { a: 1 };
}
};Ces données de retour d'action seront fournies à la page (donc dans le fichier +page.svelte
correspondant) dans la prop form lors du rechargement le page suite à l'envoi et au traitement du
formulaire.
<!-- +page.svelte -->
<script>
const { data, form } = $props(); // form ne sera remplie qu'après un envoi de formulaire
</script>La prop
form, comme la propdata, est une prop fournie par SvelteKit à tous les composants de page. Ces props n'ont pas de sens particulier dans Svelte.
Vous pouvez donc, en fonction des données fournies dans form, afficher des informations sur la
validité du formulaire :
// +page.server.ts
export const actions = {
default: () => {
return { success: true }; // vous pouvez utiliser autre chose que "success"
}
};<!-- +page.svelte -->
<script>
const { data, form } = $props(); // form ne sera remplie qu'après un envoi de formulaire
</script>
{#if form?.success}
<p>Formulaire envoyé avec succès !</p>
{/if}Erreurs de formulaire
Lorsque tout se passe bien, votre soumission de formulaire vous renvoie une réponse avec un code
200.
Mais si les données de formulaire ne sont pas conformes, il est d'usage de renvoyer une réponse avec
un code 400 ou 422, code signifiant que les données de requête sont invalides (ou un autre code
HTTP si vous préférez). Vous pouvez faire cela en utilisant l'utilitaire fail de @sveltejs/kit :
Si besoin, vous pouvez accéder au code d'erreur via le store de page, avec
$page.status.
// +page.server.ts
import { fail } from '@sveltejs/kit';
export const actions = {
default: ({ request }) => {
const data = await request.formData();
const age = data.get('age');
if (age < 18) {
// il peut être pertinent de renvoyer la donnée fournie, ici `age`
return fail(400, { age, allowed: false, message: "Vous n'avez pas le droit d'être ici." });
}
return { success: true };
}
};<!-- +page.svelte -->
<script>
const { data, form } = $props(); // form ne sera remplie qu'après un envoi de formulaire
</script>
{#if form?.success}
<p>Formulaire envoyé avec succès !</p>
{:else if !form?.allowed}
<p>{form?.message}</p>
{/if}N'oubliez pas que le comportement par défaut du navigateur est de recharger la page après une
soumission de formulaire. Donc la page sera remise dans son état initial, et les éventuelles valeurs
d'<input> seront perdues si vous ne prévoyez rien. Une bonne façon d'éviter ça et de renvoyer les
valeurs de formulaire soumises lorsqu'une erreur de formulaire se produit.
Évitez de renvoyer les mots de passe, qui sont des données sensibles.
Il est également possible de procéder à une validation côté client pour s'éviter un A/R sur le serveur. Il n'y a rien de prévu de particulier pour cela dans Svelte ou SvelteKit, il "suffit" d'implémenter de la logique d'état en Svelte, ce que nous n'allons pas faire ici. Quoi qu'il arrive, une validation côté serveur devrait toujours être nécessaire.