Form use:enhance catch 400 error

[Paultje52]

Hi. I'm new to svelte and sveltekit and I'm trying to create a registration form. When I'm returning a normal response, everything works fine. However, when I'm throwing a 400 error, the page changes and form stays null. How can I catch this error and show my own error message?

+page.svelte

<script lang="ts">
  import { enhance } from "$app/forms";
  import type { ActionData } from "./$types";
  export let form: ActionData;
  $: console.log(form);
</script>

<div>
  <hgroup>
    <h2>Register</h2>
    <h3>Undertitle</h3>
  </hgroup>

  <form method="POST" use:enhance>
    <label for="name">Name</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Name"
      autocomplete="name"
      required
    />
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="Email"
      autocomplete="email"
      required
    />
    <label for="password">Password</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="Password"
      autocomplete="new-password"
    />

    {#if form?.code === "MISSING_REQUIRED_FIELDS"}
      <p class="error">Custom error message</p>
    {/if}
    <button type="submit">Create account</button>
  </form>
</div>

+page.server.svelte

  import type { Action } from "./$types";
  import { error } from "@sveltejs/kit";
  
  const register: Action = async ({ request }) => {
    const formData = await request.formData();
  
    // Check base information
    if (
      !formData.has("name") ||
      !formData.has("email") ||
      !formData.has("password")
    ) {
      throw error(400, {
        message: "Missing required personal fields",
        code: "MISSING_REQUIRED_FIELDS"
      });
    }
 
    // Success (still need to write the rest of the code)
    return {
      message: "Registered. Please check your email to confirm your account."
    };
  };
  
  export const actions = {
    default: register
  };

[geoffrich]

You want to use return fail instead of throw error - error is treated as an unexpected error, while fail is used for validation errors. More info in the docs: https://kit.svelte.dev/docs/form-actions#anatomy-of-an-action-validation-errors

[Paultje52]

Thanks for your help, it works! I have another question: Is there a way for me to detect when a form is submitting, so I can show a loading indicator?