Sveltekit Form Actions Lanjut Named Actions Fail Progressive Enhancement

Definisi

Selain default action, SvelteKit mendukung named actions (?/nama) dan fail() untuk mengembalikan status non-200 dengan data ke form. Kombinasi dengan use:enhance memberi progressive enhancement: form jalan walau JS mati.

Kapan dipakai

Pakai untuk beberapa aksi berbeda di satu route (login vs register), atau saat perlu mengembalikan error/old input ke form tanpa reload penuh. Sangat cocok untuk pengalaman tanpa SPA penuh.

Cara kerja

Named actions

js

// +page.server.js
export const actions = {
  login: async ({ request }) => { /* ... */ },
  register: async ({ request }) => {
    const data = await request.formData();
    if (!data.get('email')) return fail(400, { email: 'wajib' });
    return { success: true };
  }
};

svelte

<form method="POST" action="?/register" use:enhance>
  <input name="email" />
  {#if form?.email}<p>{form.email}</p>{/if}
</form>

Struktur alur

Catatan implementasi

• fail(status, data) mengembalikan form prop di halaman dengan data tersebut (bukan throw).
• Named action diakses lewat action="?/nama"; default tanpa ?/.
• use:enhance menerima ({ result, update }) untuk customisasi respon.
• Validasi di server wajib; client hanya untuk UX cepat.

Kesalahan umum

• Lupa use:enhance: tetap jalan tapi reload penuh (kehilangan SPA feel).
• Return biasa vs fail: return {error} bukan fail tetap 200; pakai fail untuk error.
• Nama action bentrok: pastikan unik di object actions.
• Old input tidak dikembalikan: simpan di fail data agar user tak retype.

Referensi terkait

• Svelte Form Handling: bind, on:submit, use:enhance
• Svelte Routing dengan SvelteKit: Pages, Layouts, Load
• Next.js Forms, Zod Validation, Multipart