Schema transformations now works with immediate inputs.

Checkboxes, radio buttons, etc.
Fixes #298

Author: ciscoheat

src/lib/client/clientValidation.ts

@@ -281,15 +281,16 @@ export async function validateObjectErrors<T extends AnyZodObject, M>(
       });
       return currentErrors;
     });
+
     // Disable if form values shouldn't be updated immediately:
-    if (result.data) Form.set(result.data);
+    //if (result.data) Form.set(result.data);
   }
 }
 
-type ValidationResult<T extends ZodValidation<AnyZodObject>> = {
+export type ValidationResult<T extends Record<string, unknown>> = {
   validated: boolean | 'all';
   errors: string[] | undefined;
-  data: z.infer<T> | undefined;
+  data: T | undefined;
 };
 
 /**
@@ -306,7 +307,7 @@ export async function validateField<
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
   options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
-): Promise<ValidationResult<T>> {
+): Promise<ValidationResult<z.infer<T>>> {
   function Errors_clear() {
     clearErrors(Errors, { undefinePath: path, clearFormLevelErrors: true });
   }
@@ -371,8 +372,6 @@ export async function validateField<
     result.errors = Errors_update(result.errors);
   }
 
-  if (result.data) data.set(result.data, options);
-
   return result;
 }
 
@@ -384,7 +383,7 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
   Errors: SuperForm<T, M>['errors'],
   Tainted: SuperForm<T, M>['tainted'],
   options: ValidateOptions<unknown, UnwrapEffects<T>> = {}
-): Promise<ValidationResult<T>> {
+): Promise<ValidationResult<z.infer<T>>> {
   if (options.update === undefined) options.update = true;
   if (options.taint === undefined) options.taint = false;
   if (typeof options.errors == 'string') options.errors = [options.errors];

src/lib/client/formEnhance.ts

@@ -131,27 +131,37 @@ export function formEnhance<T extends AnyZodObject, M>(
   const errors = errs as SuperForm<T, M>['errors'];
 
   async function validateChange(
-    change: string[],
+    validityEl: HTMLElement,
     event: 'blur' | 'input',
-    validityEl: HTMLElement | null
+    errors: string[] | undefined
   ) {
+    if (!options.customValidity) return;
     if (options.validationMethod == 'submit-only') return;
 
-    if (options.customValidity && validityEl) {
-      // Always reset validity, in case it has been validated on the server.
-      if ('setCustomValidity' in validityEl) {
-        (validityEl as HTMLInputElement).setCustomValidity('');
-      }
+    // Always reset validity, in case it has been validated on the server.
+    if ('setCustomValidity' in validityEl) {
+      (validityEl as HTMLInputElement).setCustomValidity('');
+    }
 
-      if (event == 'input' && options.validationMethod == 'onblur') return;
+    if (event == 'input' && options.validationMethod == 'onblur') return;
 
-      // If event is input but element shouldn't use custom validity,
-      // return immediately since validateField don't have to be called
-      // in this case, validation is happening elsewhere.
-      if (noCustomValidityDataAttribute in validityEl.dataset)
-        if (event == 'input') return;
-        else validityEl = null;
-    }
+    // If event is input but element shouldn't use custom validity,
+    // return immediately since validateField don't have to be called
+    // in this case, validation is happening elsewhere.
+    if (noCustomValidityDataAttribute in validityEl.dataset) return;
+
+    setCustomValidity(validityEl as HTMLInputElement, errors);
+  }
+
+  // Called upon an event from a HTML element that affects the form.
+  async function htmlInputChange(
+    change: string[],
+    event: 'blur' | 'input',
+    target: HTMLElement | null
+  ) {
+    if (options.validationMethod == 'submit-only') return;
+
+    console.log('htmlInputChange', change, event, target);
 
     const result = await validateField(
       change,
@@ -161,25 +171,33 @@ export function formEnhance<T extends AnyZodObject, M>(
       tainted
     );
 
-    if (validityEl) {
-      setCustomValidity(validityEl as HTMLInputElement, result.errors);
-    }
+    // Update data if target exists (immediate is set, refactor please)
+    if (result.data && target) data.set(result.data);
 
-    // NOTE: Uncomment if Zod transformations should be immediately applied, not just when submitting.
-    // Not enabled because it's not great UX, and it's rare to have transforms, which will just result in
-    // redundant store updates.
-    //if (result.data) data.set(result.data);
+    if (options.customValidity) {
+      const name = CSS.escape(mergePath(change));
+      const el = formEl.querySelector<HTMLElement>(`[name="${name}"]`);
+      if (el) validateChange(el, event, result.errors);
+    }
   }
 
+  const immediateInputTypes = [
+    'button',
+    'checkbox',
+    'radio',
+    'range',
+    'submit'
+  ];
+
   /**
    * Some input fields have timing issues with the stores, need to wait in that case.
    */
-  function timingIssue(el: EventTarget | null) {
+  function immediateInput(el: EventTarget | null) {
     return (
       el &&
       (el instanceof HTMLSelectElement ||
         (el instanceof HTMLInputElement &&
-          (el.type == 'radio' || el.type == 'checkbox')))
+          immediateInputTypes.includes(el.type)))
     );
   }
 
@@ -192,61 +210,66 @@ export function formEnhance<T extends AnyZodObject, M>(
       return;
     }
 
-    if (timingIssue(e.target)) {
+    const target = e.target instanceof HTMLElement ? e.target : null;
+    const immediateUpdate = immediateInput(target);
+
+    // Immediate inputs has a timing issue and needs to be waited for
+    if (immediateUpdate) {
       await new Promise((r) => setTimeout(r, 0));
     }
 
     for (const change of get(lastChanges)) {
-      let validityEl: HTMLElement | null = null;
-
-      if (options.customValidity) {
-        const name = CSS.escape(mergePath(change));
-        validityEl = formEl.querySelector<HTMLElement>(`[name="${name}"]`);
-      }
-
-      validateChange(change, 'blur', validityEl);
+      htmlInputChange(change, 'blur', immediateUpdate ? null : target);
     }
     // Clear last changes after blur (not after input)
     lastChanges.set([]);
   }
   formEl.addEventListener('focusout', checkBlur);
 
   // Add input event, for custom validity
-  async function checkCustomValidity(e: Event) {
+  async function checkInput(e: Event) {
     if (
       options.validationMethod == 'onblur' ||
       options.validationMethod == 'submit-only'
     ) {
       return;
     }
 
-    if (timingIssue(e.target)) {
+    const immediateUpdate = immediateInput(e.target);
+
+    if (immediateUpdate) {
       await new Promise((r) => setTimeout(r, 0));
     }
 
-    for (const change of get(lastChanges)) {
-      const name = CSS.escape(mergePath(change));
-      const validityEl = formEl.querySelector<HTMLElement>(
-        `[name="${name}"]`
-      );
-      if (!validityEl) continue;
+    const target = e.target instanceof HTMLElement ? e.target : null;
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const hadErrors = traversePath(get(errors), change as any);
-      if (hadErrors && hadErrors.key in hadErrors.parent) {
+    for (const change of get(lastChanges)) {
+      const hadErrors =
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        immediateUpdate || traversePath(get(errors), change as any);
+      if (
+        immediateUpdate ||
+        (typeof hadErrors == 'object' && hadErrors.key in hadErrors.parent)
+      ) {
         // Problem - store hasn't updated here with new value yet.
-        setTimeout(() => validateChange(change, 'input', validityEl), 0);
+        setTimeout(
+          () =>
+            htmlInputChange(
+              change,
+              'input',
+              immediateUpdate ? target : null
+            ),
+          0
+        );
       }
     }
   }
 
-  if (options.customValidity) {
-    formEl.addEventListener('input', checkCustomValidity);
-  }
+  formEl.addEventListener('input', checkInput);
 
   onDestroy(() => {
     formEl.removeEventListener('focusout', checkBlur);
-    formEl.removeEventListener('input', checkCustomValidity);
+    formEl.removeEventListener('input', checkInput);
   });
 
   const htmlForm = Form(formEl, { submitting, delayed, timeout }, options);

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

@@ -4,23 +4,36 @@
   import { superValidateSync } from '$lib/client';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
 
-  export const timePatternSchema = z.object({
-    recurrenceRuleSets: z
+  function ruleSet<T extends readonly [string, ...string[]]>(options: T) {
+    let prev: string | undefined = undefined;
+    let current = options[0];
+    return z
       .object({
-        endType: z.enum(['never', 'date', 'after']),
-        rrule: z.string()
+        options: z.enum(options).default(options[0] as any),
+        prev: z.string().optional()
       })
       .transform((value) => {
-        let newRrule = 'after';
-        console.log({ ...value, rrule: newRrule });
-        return { ...value, rrule: newRrule };
-      })
+        const output = { ...value, prev: prev };
+        prev = current;
+        current = value.options as string;
+        return output;
+      });
+  }
+
+  const r1 = ['r1A', 'r1B', 'r1C'] as const;
+  const r2 = ['r2A', 'r2B', 'r2C'] as const;
+
+  const schema = z.object({
+    r1: ruleSet(r1),
+    r2: ruleSet(r2)
   });
 
-  const superForm = _superForm(superValidateSync(timePatternSchema), {
+  type T = z.infer<typeof schema>;
+
+  const superForm = _superForm(superValidateSync(schema), {
     SPA: true,
     dataType: 'json',
-    validators: timePatternSchema,
+    validators: schema,
     taintedMessage: null
   });
 
@@ -30,16 +43,24 @@
 <SuperDebug data={$form} />
 
 <form use:superForm.enhance method="post">
-  {#each ['never', 'date', 'after'] as item}
+  {#each r1 as item}
     <div>
       <input
         value={item}
-        bind:group={$form.recurrenceRuleSets.endType}
+        bind:group={$form.r1.options}
         type="radio"
         id={item}
         name={item}
       />
       {item}
     </div>
   {/each}
+
+  <hr />
+
+  <select bind:value={$form.r2.options}>
+    {#each r2 as item}
+      <option value={item}>{item}</option>
+    {/each}
+  </select>
 </form>

src/routes/tests/spa-schema-transform/schema.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 export const schema = z.object({
-  name: z.string().min(1),
+  name: z.string().min(1).trim(),
   email: z
     .string()
     .email()