Svelte Forms Explained — Form Handling and Validation

In this tutorial, you will learn about Svelte Forms Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte form handling leverages bind:value for two-way data binding, with native HTML5 validation enhanced by reactive validation logic and custom error messages.

What You'll Learn

• Form binding with bind:value
• Form submit handling
• Reactive field validation
• Error message display
• File inputs and custom controls

Why It Matters

Svelte's binding system makes forms concise compared to React's controlled components, with less boilerplate while maintaining full reactivity for validation state.

<script>
  let form = { name: "", email: "", age: null, role: "" };
  let errors = {};
  let submitted = false;

  $: errors = validate(form);

  function validate(f) {
    let e = {};
    if (!f.name) e.name = "Name is required";
    if (!f.email) e.email = "Email is required";
    else if (!f.email.includes("@")) e.email = "Invalid email format";
    if (!f.role) e.role = "Please select a role";
    return e;
  }

  function handleSubmit() {
    if (Object.keys(errors).length > 0) return;
    submitted = true;
    console.log("Submitted:", form);
  }
</script>

{#if submitted}
  <h2>Thank you, {form.name}!</h2>
{:else}
  <form on:submit|preventDefault={handleSubmit}>
    <input bind:value={form.name} placeholder="Name" />
    {#if errors.name}<span class="error">{errors.name}</span>{/if}

    <input bind:value={form.email} placeholder="Email" type="email" />
    {#if errors.email}<span class="error">{errors.email}</span>{/if}

    <select bind:value={form.role}>
      <option value="">Select role...</option>
      <option value="dev">Developer</option>
      <option value="design">Designer</option>
    </select>
    {#if errors.role}<span class="error">{errors.role}</span>{/if}

    <button type="submit" disabled={Object.keys(errors).length > 0}>Submit</button>
  </form>
{/if}

Expected output: Form with real-time validation, disabled submit button when invalid, and success message after valid submission.