Client validation now runs properly when $form is modified.

Author: ciscoheat

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed timing issues with radio buttons and validation with side-effects.
 - Using standard array access to fix problems with iOS and iPadOS <= 15.3
 - Fixed client validation problems with multi-select fields.
+- Client validation now runs properly when `$form` is modified.
 
 ## [0.8.4] - 2023-04-27
 

src/lib/client/index.ts

@@ -609,6 +609,44 @@ export function superForm<
     return obj === true;
   }
 
+  function Tainted__validate(path: string[], taint: TaintOption) {
+    if (
+      options.validationMethod == 'onblur' ||
+      options.validationMethod == 'submit-only'
+    ) {
+      return;
+    }
+
+    let shouldValidate = options.validationMethod === 'oninput';
+
+    if (!shouldValidate) {
+      const errorContent = get(Errors);
+
+      const errorNode = errorContent
+        ? pathExists(errorContent, path)
+        : undefined;
+
+      // Need a special check here, since if the error has never existed,
+      // there won't be a key for the error. But if it existed and was cleared,
+      // the key exists with the value undefined.
+      const hasError = errorNode && errorNode.key in errorNode.parent;
+
+      shouldValidate = !!hasError;
+    }
+
+    if (shouldValidate) {
+      validateField(
+        path,
+        options.validators,
+        options.defaultValidator,
+        Form,
+        Errors,
+        Tainted,
+        { taint }
+      );
+    }
+  }
+
   function Tainted_update(
     newObj: unknown,
     compareAgainst: unknown,
@@ -634,6 +672,11 @@ export function superForm<
         setPaths(tainted, paths, options === true ? true : undefined);
         return tainted;
       });
+
+      for (const path of paths) {
+        //console.log('🚀 ~ file: index.ts:681 ~ path:', path);
+        Tainted__validate(path, options);
+      }
     }
   }
 
@@ -1264,51 +1307,6 @@ function formEnhance<T extends AnyZodObject, M>(
   }
   formEl.addEventListener('focusout', checkBlur);
 
-  // Add input event, to check tainted
-  async function checkInput(e: Event) {
-    if (
-      options.validationMethod == 'onblur' ||
-      options.validationMethod == 'submit-only'
-    ) {
-      return;
-    }
-
-    // Some form fields have some timing issue, need to wait
-    if (timingIssue(e.target)) {
-      await new Promise((r) => setTimeout(r, 0));
-    }
-
-    const errorContent = get(errors);
-    const taintedContent = get(tainted);
-
-    for (const change of get(lastChanges)) {
-      let shouldValidate = options.validationMethod === 'oninput';
-
-      if (!shouldValidate) {
-        const isTainted =
-          taintedContent &&
-          pathExists(taintedContent, change, (value) => value === true);
-
-        const errorNode = errorContent
-          ? pathExists(errorContent, change)
-          : undefined;
-
-        // Need a special check here, since if the error has never existed,
-        // there won't be a key for the error. But if it existed and was cleared,
-        // the key exists with the value undefined.
-        const hasError = errorNode && errorNode.key in errorNode.parent;
-
-        shouldValidate = !!isTainted && !!hasError;
-      }
-
-      if (shouldValidate) {
-        //console.log('🚀 ~ file: index.ts:920 ~ INPUT with error:', change);
-        validateChange(change);
-      }
-    }
-  }
-  formEl.addEventListener('input', checkInput);
-
   const ErrorTextEvents = new Set<HTMLFormElement>();
 
   function ErrorTextEvents_selectText(e: Event) {
@@ -1338,7 +1336,6 @@ function formEnhance<T extends AnyZodObject, M>(
     );
     ErrorTextEvents.clear();
     formEl.removeEventListener('focusout', checkBlur);
-    formEl.removeEventListener('input', checkInput);
   });
 
   type ValidationResponse<

src/routes/tests/bound-component/+page.server.ts

@@ -0,0 +1,19 @@
+import type { Actions, PageServerLoad } from './$types';
+import { superValidate } from '$lib/server';
+import type { z } from 'zod';
+import { schema } from './schemas';
+
+export const load = (async () => {
+  const form = await superValidate(schema);
+  return { form };
+}) satisfies PageServerLoad;
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    const form = await superValidate(formData, schema);
+    console.log('POST', form);
+
+    return { form };
+  }
+} satisfies Actions;

src/routes/tests/bound-component/+page.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schemas';
+  import { page } from '$app/stores';
+  import InputField from './input-field.svelte';
+
+  export let data: PageData;
+
+  const { form, errors, message, tainted, enhance } = superForm(data.form, {
+    dataType: 'json',
+    defaultValidator: 'keep',
+    validators: schema,
+    onError: (event) => {
+      console.log('onError', event);
+    },
+    onResult: (event) => {
+      console.log('onResult', event);
+    },
+    onSubmit: (args) => {
+      console.log('onSubmit', args);
+    }
+  });
+
+  $: {
+    //console.log('current form', $form, 'errors', $errors);
+  }
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+<h3>Superforms testing ground</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+{#if $errors}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    ERRORS
+    {JSON.stringify($errors, null, 2)}
+  </div>
+{/if}
+<form method="POST" enctype="multipart/form-data" use:enhance>
+  <InputField label="Name" bind:value={$form.name} errors={$errors.name} />
+  <br />
+  <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>
+  <br />
+
+  <button>Submit</button>
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.vercel.app/api"
+    >API Reference</a
+  >
+</p>
+
+<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/bound-component/input-field.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  //export let field
+  export let value: string;
+  export let errors: string[] | undefined;
+  export let label: string;
+</script>
+
+<label>
+  {label}<br />
+  <input type="text" data-invalid={errors} bind:value />
+</label>
+{#if errors}<span class="invalid">{errors}</span>{/if}
+
+<button
+  on:click={(e) => {
+    e.preventDefault();
+    value = 'I am valid';
+  }}>reset</button
+>
+
+<style lang="scss">
+  .invalid {
+    color: orangered;
+  }
+</style>

src/routes/tests/bound-component/schemas.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z
+    .string()
+    .min(2)
+    .regex(/^[A-Z]/, 'should start with a capital letter'),
+  email: z.string().email()
+});