Fixes #230.

Ignoring normal form actions.

Author: ciscoheat

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed exception message when the `dataType` option isn't set to `'json'` and the schema contains a nested object.
+- Superforms are now ignoring normal SvelteKit form actions when they are posted. ([#230](https://github.com/ciscoheat/sveltekit-superforms/issues/230))
 
 ## [1.2.0] - 2023-07-06
 

src/lib/client/index.ts

@@ -806,8 +806,6 @@ export function superForm<
           if (pageUpdate.form.type == 'error') return;
 
           const forms = Context_findValidationForms(pageUpdate.form);
-          if (!forms.length) error('$page.form (ActionData)');
-
           for (const newForm of forms) {
             //console.log('🚀~ ActionData ~ newForm:', newForm.id);
             if (newForm.id !== _formId) continue;

src/routes/tests/issue-227/+page.server.ts

@@ -0,0 +1,15 @@
+import { superValidate } from '$lib/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  name: z.string().default('Hello world!'),
+  email: z.string().email()
+});
+
+export const load = async () => {
+  // Server API:
+  const form = await superValidate(schema);
+
+  // Always return { form } in load and form actions.
+  return { form };
+};

src/routes/tests/issue-227/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  export let data: PageData;
+
+  const { form, errors, enhance, message } = superForm(data.form, {
+    onError: ({ result }) => {
+      $message = result.error.message;
+    }
+  });
+</script>
+
+<SuperDebug data={{ $form, $message }} />
+
+{#if $message}
+  <div class="invalid">Error message: {$message}</div>
+{/if}
+
+<form method="POST" action="/tests/issue-227/endpoint" use:enhance>
+  <label for="name">Name</label>
+  <input
+    type="text"
+    name="name"
+    aria-invalid={$errors.name ? 'true' : undefined}
+    bind:value={$form.name}
+  />
+  {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+
+  <label for="email">E-mail</label>
+  <input
+    type="email"
+    name="email"
+    aria-invalid={$errors.email ? 'true' : undefined}
+    bind:value={$form.email}
+  />
+  {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+
+  <div><button>Submit</button></div>
+</form>
+
+<style>
+  .invalid {
+    color: red;
+    padding: 1rem 0;
+    font-weight: bold;
+  }
+</style>

src/routes/tests/issue-227/endpoint/+server.ts

@@ -0,0 +1,5 @@
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async () => {
+  return new Response('Body limit response', { status: 413 });
+};

src/routes/tests/issue-230/+layout.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm, superValidateSync } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { z } from 'zod';
+
+  const schema = z.object({
+    name: z.string().min(1),
+    email: z.string().email()
+  });
+
+  const { form, errors, message, enhance } = superForm(
+    superValidateSync(schema)
+  );
+</script>
+
+<div style="border: 3px solid red; padding: 10px;">
+  <SuperDebug data={$form} />
+
+  <h3>This is from +layout.svelte</h3>
+
+  {#if $message}
+    <div
+      class="status"
+      class:error={$page.status >= 400}
+      class:success={$page.status == 200}
+    >
+      {$message}
+    </div>
+  {/if}
+
+  <form method="POST" action="/tests/issue-230" use:enhance>
+    <label>
+      Name<br />
+      <input
+        name="name"
+        data-invalid={$errors.name}
+        bind:value={$form.name}
+      />
+      {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+    </label>
+
+    <label>
+      Email<br />
+      <input
+        name="email"
+        type="email"
+        data-invalid={$errors.email}
+        bind:value={$form.email}
+      />
+      {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+    </label>
+
+    <button>Submit</button>
+  </form>
+
+  <hr />
+  <p>
+    <a target="_blank" href="https://superforms.vercel.app/api"
+      >API Reference</a
+    >
+  </p>
+</div>
+
+<div style="border: 2px solid green; padding: 10px; margin-top: 10px;">
+  <slot />
+</div>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  .status {
+    color: white;
+    padding: 4px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/routes/tests/issue-230/+page.server.ts

@@ -0,0 +1,22 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { z } from 'zod';
+
+const schema = z.object({
+  name: z.string().min(1),
+  email: z.string().email()
+});
+
+///// Form actions /////
+
+export const actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/issue-230/normal-form/+page.server.ts

@@ -0,0 +1,11 @@
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    // Data here
+    const formData = await request.formData();
+    console.log(formData);
+
+    return { success: true };
+  }
+};

src/routes/tests/issue-230/normal-form/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { enhance } from '$app/forms';
+  import type { ActionData } from './$types';
+
+  export let form: ActionData;
+</script>
+
+<div style="background-color: yellow;">
+  This is +page.svelte, in the slot of Layout<br />Try Submitting the form
+  below - which is a normal Svelte Form Action use:enhance
+</div>
+
+<form style="margin-top: 10px;" method="POST" use:enhance>
+  <input type="text" name="name" value="test" />
+  <button type="submit">Submit</button>
+  {#if form?.success}Posted!{/if}
+</form>