Client-side validation wasn't resetted properly, when a component containing a form was destroyed and mounted again.

Author: ciscoheat

CHANGELOG.md

@@ -5,10 +5,11 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.5.4] - 2023-08-17
 
 ### Fixed
 
+- Client-side validation wasn't resetted properly, when a component containing a form was destroyed and mounted again.
 - Removed debug statement left from 1.5.3
 
 ## [1.5.3] - 2023-08-16
@@ -23,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Forms in components weren't resetted properly when destroyed and created again.
+- Forms in components weren't resetted properly when destroyed and mounted again.
 
 ## [1.5.1] - 2023-08-09
 

src/lib/client/index.ts

@@ -255,9 +255,10 @@ export type SuperForm<T extends ZodValidation<AnyZodObject>, M = any> = {
 export type EnhancedForm<T extends AnyZodObject, M = any> = SuperForm<T, M>;
 
 const formIds = new WeakMap<Page, Set<string | undefined>>();
-
-// Track ActionData, so it won't be applied twice for componentized forms.
-const postedActionData = new WeakSet<object>();
+const initializedForms = new WeakMap<
+  object,
+  SuperValidated<ZodValidation<AnyZodObject>, unknown>
+>();
 
 function multipleFormIdError(id: string | undefined) {
   return (
@@ -341,8 +342,22 @@ export function superForm<
     }
   }
 
-  // Need to clone the validation data, in case it's used to populate multiple forms.
-  const initialForm = clone(form);
+  // Need to clone the form data, in case it's used to populate multiple forms and in components
+  // that are mounted and destroyed multiple times.
+  if (!initializedForms.has(form)) {
+    initializedForms.set(form, clone(form));
+  }
+  const initialForm = initializedForms.get(form) as SuperValidated<T, M>;
+
+  if (typeof initialForm.valid !== 'boolean') {
+    throw new SuperFormError(
+      'A non-validation object was passed to superForm. ' +
+        'It should be an object of type SuperValidated, usually returned from superValidate.'
+    );
+  }
+
+  // Restore the initial data, in case of a mounted/destroyed component.
+  let _initiallyCloned = false;
 
   // Detect if a form is posted without JavaScript.
   const postedData = _currentPage.form;
@@ -351,9 +366,9 @@ export function superForm<
     for (const postedForm of Context_findValidationForms(
       postedData
     ).reverse()) {
-      if (postedForm.id === _formId && !postedActionData.has(postedForm)) {
+      if (postedForm.id === _formId && !initializedForms.has(postedForm)) {
         // Prevent multiple "posting" that can happen when components are recreated.
-        postedActionData.add(postedData);
+        initializedForms.set(postedData, postedData);
 
         const pageDataForm = form as SuperValidated<T, M>;
         form = postedForm as SuperValidated<T, M>;
@@ -364,21 +379,17 @@ export function superForm<
           (options.resetForm === true || options.resetForm())
         ) {
           form = clone(pageDataForm);
-          form.message = postedForm.message;
+          form.message = clone(postedForm.message);
+          _initiallyCloned = true;
         }
         break;
       }
     }
   }
 
-  const form2 = form as SuperValidated<T, M>;
+  if (!_initiallyCloned) form = clone(initialForm);
 
-  if (typeof initialForm.valid !== 'boolean') {
-    throw new SuperFormError(
-      'A non-validation object was passed to superForm. ' +
-        'It should be an object of type SuperValidated, usually returned from superValidate.'
-    );
-  }
+  const form2 = form as SuperValidated<T, M>;
 
   // Underlying store for Errors
   const _errors = writable(form2.errors);
@@ -833,12 +844,12 @@ export function superForm<
           const forms = Context_findValidationForms(actionData);
           for (const newForm of forms) {
             //console.log('🚀~ ActionData ~ newForm:', newForm.id);
-            if (newForm.id !== _formId || postedActionData.has(newForm)) {
+            if (newForm.id !== _formId || initializedForms.has(newForm)) {
               continue;
             }
 
             // Prevent multiple "posting" that can happen when components are recreated.
-            postedActionData.add(newForm);
+            initializedForms.set(newForm, newForm);
 
             await Form_updateFromValidation(
               newForm as SuperValidated<T, M>,
@@ -851,7 +862,9 @@ export function superForm<
           const forms = Context_findValidationForms(pageUpdate.data);
           for (const newForm of forms) {
             //console.log('🚀 ~ PageData ~ newForm:', newForm.id);
-            if (newForm.id !== _formId) continue;
+            if (newForm.id !== _formId || initializedForms.has(newForm)) {
+              continue;
+            }
 
             rebind(newForm as SuperValidated<T, M>, untaint);
           }

src/routes/Navigation.svelte

@@ -25,6 +25,8 @@
   <a href="/tests/spa-values-disappearing">SPA onUpdate</a>
   <a href="/posted">Posted store</a>
   <a href="/tests/flash-onerror">Flash onError</a>
+  <a href="/tests/reset-component">Reset component 1</a>
+  <a href="/tests/reset-component-2">Reset component 2</a>
 </nav>
 
 <style lang="scss">

src/routes/tests/reset-component-2/+page.server.ts

@@ -0,0 +1,38 @@
+import { superValidate, message } from '$lib/server';
+import { registerSchema, profileSchema } from './schema';
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const load = async () => {
+  // Server API:
+  const regForm = await superValidate(registerSchema);
+  const profileForm = await superValidate(profileSchema);
+
+  return { regForm, profileForm };
+};
+
+export const actions = {
+  register: async ({ request }) => {
+    const regForm = await superValidate(request, registerSchema);
+
+    console.log('register', regForm);
+
+    if (!regForm.valid) return fail(400, { regForm });
+
+    return message(regForm, {
+      text: 'Form "register" posted successfully!'
+    });
+  },
+
+  edit: async ({ request }) => {
+    const profileForm = await superValidate(request, profileSchema);
+
+    console.log('edit', profileForm);
+
+    if (!profileForm.valid) return fail(400, { profileForm });
+
+    return message(profileForm, {
+      text: 'Form "profile" posted successfully!'
+    });
+  }
+} satisfies Actions;

src/routes/tests/reset-component-2/+page.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { registerSchema } from './schema';
+
+  import SuperForm from './Form.svelte';
+  import TextField from './TextField.svelte';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+
+  let visible = true;
+</script>
+
+<h3>Multiple componentized Forms</h3>
+<hr />
+
+<h4>Register Form</h4>
+
+<button on:click={() => (visible = !visible)}>Toggle</button>
+
+{#if visible}
+  <!-- SuperForm with dataType 'form' -->
+  <SuperForm
+    action="?/register"
+    schema={registerSchema}
+    data={data.regForm}
+    invalidateAll={false}
+    let:form
+    let:message
+  >
+    {#if message}
+      <div
+        class="status"
+        class:error={message.status >= 400}
+        class:success={!message.status || message.status < 300}
+      >
+        {message.text}
+      </div>
+    {/if}
+
+    <TextField type="text" {form} field="name" label="Name" />
+    <TextField type="text" {form} field="email" label="E-Mail" />
+    <p>
+      <button type="submit">submit</button>
+    </p>
+  </SuperForm>
+{/if}
+
+<style>
+  .status {
+    color: white;
+    padding: 6px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+    margin-block: 0.75em;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  hr {
+    margin: 2rem 0;
+  }
+</style>

src/routes/tests/reset-component-2/Form.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  import { superForm } from '$lib/client';
+  export let data;
+  export let schema: any | undefined = undefined;
+  export let dataType: 'form' | 'json' = 'form';
+  export let invalidateAll; // set to false to keep form data using muliple forms on a page
+
+  export const _form = superForm(data, {
+    dataType: dataType,
+    validators: schema ? schema : undefined,
+    invalidateAll: invalidateAll,
+    onError({ result }) {
+      $message = {
+        text: result?.error?.message,
+        status: 500
+      };
+    },
+    onUpdated({ form }) {
+      if (form.valid) {
+        // Successful post! Do some more client-side stuff.
+      }
+    }
+  });
+
+  const { form, message, tainted, delayed, errors, allErrors, enhance } =
+    _form;
+</script>
+
+<form method="POST" use:enhance {...$$restProps}>
+  <slot
+    form={_form}
+    message={$message}
+    errors={$errors}
+    allErrors={$allErrors}
+    delayed={$delayed}
+  />
+</form>
+
+<SuperDebug data={$form} />

src/routes/tests/reset-component-2/TextField.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { formFieldProxy } from '$lib/client';
+
+  let _class = '';
+
+  export { _class as class };
+  export let label: string | undefined = undefined;
+  export let field: string;
+  export let form;
+
+  const { value, errors, constraints } = formFieldProxy(form, field);
+</script>
+
+{#if label !== undefined}
+  <label class="label" for={field}>{label}</label>
+{/if}
+<div class="control">
+  <input
+    class={'input ' + _class}
+    name={field}
+    aria-invalid={$errors ? 'true' : undefined}
+    placeholder=""
+    bind:value={$value}
+    {...$$restProps}
+  />
+</div>
+{#if $errors}
+  <p class="help is-danger">{$errors}</p>
+{/if}
+
+<style>
+  .is-danger {
+    color: red;
+  }
+
+  input {
+    background-color: #e7e7e7;
+  }
+
+  input:not(:placeholder-shown):invalid {
+    box-shadow: inset 0px 0px 3px 1px #f00;
+  }
+</style>

src/routes/tests/reset-component-2/schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const registerSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email()
+});
+
+export const profileSchema = z.object({
+  name: z.string().min(2),
+  age: z.coerce.number().gte(16).default(18)
+});

src/routes/tests/reset-component/Form.svelte

@@ -1,16 +1,14 @@
 <script>
   import { superForm, superValidateSync } from '$lib/client';
   import { z } from 'zod';
-  import { onDestroy } from 'svelte';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
   import { page } from '$app/stores';
-  import { get } from 'svelte/store';
 
   const schema = z.object({
     id: z.number().min(1).max(255).default(1),
     name: z
       .string()
-      .min(1, 'Name must contain at least 1 character')
+      .min(2, 'Name must contain at least 2 characters')
       .max(255, 'Name must not exceed 255 characters')
       .default('')
   });