Sveltejs Academy · Lektion

Hantera valideringsfel i actions

Returnera valideringsfel och fyll i formulärfält igen med fail() och ActionData.

Lektion 4 av 413 steg

Hantera valideringsfel i actions är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Hjälpfunktionen fail

Använd fail() för att returnera valideringsfel med en status som inte är 2xx utan att kasta ett fel.

import { fail } from "@sveltejs/kit";
if (!email) return fail(400, { email, missing: true });

Statuskod

Det första argumentet är HTTP-statusen (vanligtvis 400 vid validering).

Feldatanyttolast

Det andra argumentet är data som skickas tillbaka till sidan. Inkludera användarens indata så att fälten kan fyllas i igen.

Läs på sidan

Sidan tar emot en prop form med åtgärdens resultat.

<script>
  export let form;
</script>
{#if form?.missing}<p>Please enter an email.</p>{/if}

Fyll i fält igen

Skicka tillbaka det inskickade värdet via fail och fyll i fälten på nytt så att användaren slipper skriva in det igen.

<input name="email" value={form?.email ?? ""} />

Fel per fält

Använd separata felnycklar för varje fält för ett mer detaljerat gränssnitt.

return fail(400, { errors: { email: "Invalid" } });

Kombinera med schemavalidering

Använd bibliotek som Zod eller Valibot på servern för typsäker parsning.

Undvik att kasta fel vid validering

Att kasta fel leder till felsidor. fail låter användaren stanna kvar i formuläret.

Återställ formuläret vid lyckat resultat

Vid lyckat resultat rensar du formulärets tillstånd genom att returnera tomma värden eller omdirigera.

Använd med use:enhance

Propen form uppdateras utan omladdning tack vare enhance.

Tillgänglighet

Meddela fel med aria-live så att skärmläsare läser upp dem.

Snabbkontroll

Vad returnerar fail()?

Sammanfattning

Använd fail() för valideringsfel. Sidan läser dem från propen form för att ge tydlig återkoppling.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
41
Lektioner
163

Vanliga frågor

Är lektionen ”Hantera valideringsfel i actions” gratis?

Ja – hela texten till ”Hantera valideringsfel i actions” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Hantera valideringsfel i actions”?

Returnera valideringsfel och fyll i formulärfält igen med fail() och ActionData. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Hantera valideringsfel i actions”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. +page.server.js med actions
  2. Direktivet use:enhance
  3. Progressiv förbättring av formulär
  4. Hantera valideringsfel i actions
← Tillbaka till Sveltejs Academy