Form Actions reprezintă modul standard prin care SvelteKit trimite date către server. Ele funcționează nativ conform specificațiilor HTML chiar și dacă JavaScript este dezactivat în browser (progressive enhancement), iar când JS este activ, oferă o experiență SPA fără reîncărcarea paginii prin acțiunea use:enhance.
Definirea acțiunilor de server în +page.server.ts
import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';
export const actions: Actions = {
creeaza_articol: async ({ request, locals }) => {
const formData = await request.formData();
const titlu = formData.get('titlu') as string;
const continut = formData.get('continut') as string;
// Validare de date pe server:
if (!titlu || titlu.length < 5) {
return fail(400, {
eroare: 'Titlul trebuie să aibă minimum 5 caractere.',
valori: { titlu, continut }
});
}
// Salvare în baza de date...
return { success: true };
}
};Formularul Svelte cu use:enhance (+page.svelte)
<script lang="ts">
import { enhance } from '$app/forms';
let { form } = $props(); // preia rezultatul sau erorile returnate de server
</script>
<form method="POST" action="?/creeaza_articol" use:enhance>
{#if form?.eroare}
<p class="eroare">{form.eroare}</p>
{/if}
<label>
Titlu Articol:
<input name="titlu" value={form?.valori?.titlu ?? ''} required />
</label>
<button type="submit">Publică Articol</button>
</form>
Întrebări & Exemple de Cod:
SvelteKit Form Actions: Trimiterea și Validarea Formularelor pe ServerAi o nelămurire despre utilizarea comenzii
SvelteKit Form Actions: Trimiterea și Validarea Formularelor pe Serversau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.