Svelte Form Handling Bind Onsubmit Use Enhance Actions

Definisi

Penanganan form di Svelte memakai bind:value untuk two-way binding dan on:submit untuk intersepsi. Di SvelteKit, use:enhance dari submit memungkinkan form bekerja tanpa full reload (progressive enhancement).

Kapan dipakai

Pakai bind + on:submit untuk form SPA sederhana. Pakai use:enhance (SvelteKit) bila ingin form tetap jalan walau JS mati, tapi lebih mulus saat JS aktif.

Cara kerja

Binding dasar

svelte

<script>
  let email = '';
  let pesan = '';
  function submit() {
    console.log(email, pesan);
  }
</script>
 
<form on:submit|preventDefault={submit}>
  <input bind:value={email} />
  <textarea bind:value={pesan}></textarea>
  <button type="submit">Kirim</button>
</form>

SvelteKit enhancement

svelte

<script>
  import { enhance } from '$app/forms';
</script>
 
<form method="POST" use:enhance>
  <input name="email" />
  <button>Kirim</button>
</form>

js

// +page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    // proses data.email ...
    return { success: true };
  }
};

Struktur alur

Catatan implementasi

• on:submit|preventDefault cegah reload default; di SvelteKit use:enhance sudah menangani itu.
• bind:group untuk radio/checkbox grup.
• Validasi bisa di client (reactive) dan server (action) — jangan hanya client.
• use:enhance menerima callback ({ result }) => {} untuk tangani respon.

Kesalahan umum

• Lupa |preventDefault: form reload halaman padahal mau SPA.
• Validasi hanya client: mudah di-bypass; validasi juga di server.
• Nama input tidak cocok action: formData.get('email') undefined.
• Bind ke undefined: bind:value={x} butuh let x = '' dideklarasikan.

Referensi terkait

• Svelte Reactivity: $, Reactive Statements, Derived State
• HTML Forms, Inputs, Labels, Validation, Accessibility
• Next.js Forms, Zod Validation, Multipart