WIP: Testing display of delayed errors

Author: ciscoheat

CHANGELOG.md

@@ -7,9 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.0-rc.2]
 
+### Fixed
+
+- Async validation works again for custom validators and `superValidate`.
+
 ### Added
 
-- `reset` now have an additional `data` option that can be used to re-populate the form with data.
+- `reset` now has an additional `data` option that can be used to re-populate the form with data.
 - `intProxy`, `numberProxy`, `dateProxy` and `stringProxy` now have an `empty` option, so empty values can be set to `null` or `undefined`.
 
 ## [1.0.0-rc.1]
@@ -19,7 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Explicitly setting a form `id` for multiple forms is not required anymore when using `use:enhance`, unless the forms are using the same schema. An id can be specified in the options or in a hidden form field called `__superform_id`.
 - `setError` doesn't handle form-level errors anymore, use refine/superRefine on the schema, or the `message` helper.
 - `FieldPath` is gone - the following methods are now using a string accessor like `tags[2].id` instead of an array like `['tags', 2, 'id']`: `validate`, `setError` and all proxy methods (ending with `Proxy`). This also applies to generic components.
-- The signature for `allErrors` and `firstError` has changed to `{ path: string[]; messages: string[] }`.
+- The signature for `allErrors` and `firstError` has changed to `{ path: string; messages: string[] }`.
 - The literal `"any"` is now an allowed value in `step` for constraints.
 - Multiple `regex` and `step` is now allowed in a schema. A warning will be emitted by default, that can be turned off.
 - The signature for `options.resetForm` has changed to `boolean | () => boolean` (it was async before).

package.json

@@ -92,6 +92,7 @@
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.20.0",
     "@sveltejs/package": "^2.0.2",
+    "@types/throttle-debounce": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "devalue": "^4.3.2",
@@ -108,6 +109,7 @@
     "svelte-check": "^3.4.3",
     "sveltekit-flash-message": "1.0.0-rc.1",
     "sveltekit-rate-limiter": "^0.1.8",
+    "throttle-debounce": "^5.0.0",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",

pnpm-lock.yaml

@@ -98,15 +98,8 @@ export function formEnhance<T extends AnyZodObject, M>(
   // Using this type in the function argument causes a type recursion error.
   const errors = errs as SuperForm<T, M>['errors'];
 
-  function validateChange(change: string[]) {
-    validateField(
-      change,
-      options.validators,
-      options.defaultValidator,
-      data,
-      errors,
-      tainted
-    );
+  async function validateChange(change: string[]) {
+    await validateField(change, options, data, errors, tainted);
   }
 
   function timingIssue(el: EventTarget | null) {
@@ -351,30 +344,14 @@ export function formEnhance<T extends AnyZodObject, M>(
       if (options.flashMessage) cancelFlash(options);
     } else {
       // Client validation
-      let validationResult;
-
-      if (options.validators) {
-        validationResult = await clientValidation(
-          get(data),
-          options.validators,
-          get(formId),
-          get(constraints)
-        );
-      }
-
-      if (
-        options.delayedValidators &&
-        (!validationResult || validationResult.valid)
-      ) {
-        validationResult = await clientValidation(
-          get(data),
-          options.delayedValidators,
-          get(formId),
-          get(constraints)
-        );
-      }
+      const validation = await clientValidation(
+        options,
+        get(data),
+        get(formId),
+        get(constraints)
+      );
 
-      if (validationResult && !validationResult.valid) {
+      if (!validation.valid) {
         cancel();
 
         const result = {
@@ -383,7 +360,7 @@ export function formEnhance<T extends AnyZodObject, M>(
             (typeof options.SPA === 'boolean'
               ? undefined
               : options.SPA?.failStatus) ?? 400,
-          data: { form: validationResult.validationResult }
+          data: { form: validation.result }
         };
 
         setTimeout(() => validationResponse({ result }), 0);
@@ -590,8 +567,41 @@ export function formEnhance<T extends AnyZodObject, M>(
 }
 
 async function clientValidation<T extends AnyZodObject>(
+  options: FormOptions<T, never>,
+  checkData: z.infer<T>,
+  formId: string | undefined,
+  constraints: Validation<ZodValidation<T>>['constraints']
+) {
+  let validationResult: Awaited<ReturnType<typeof _clientValidation<T>>>;
+
+  if (options.validators) {
+    validationResult = await _clientValidation(
+      options.validators,
+      checkData,
+      formId,
+      constraints
+    );
+  } else {
+    validationResult = { valid: true as const };
+  }
+
+  if (options.delayedValidators && validationResult.valid) {
+    validationResult = await _clientValidation(
+      options.delayedValidators,
+      checkData,
+      formId,
+      constraints
+    );
+  }
+
+  return validationResult;
+}
+
+async function _clientValidation<T extends AnyZodObject>(
+  validators:
+    | FormOptions<T, unknown>['validators']
+    | FormOptions<T, unknown>['delayedValidators'],
   checkData: z.infer<T>,
-  validators: FormOptions<T, unknown>['validators'],
   formId: string | undefined,
   constraints: Validation<ZodValidation<T>>['constraints']
 ) {
@@ -678,7 +688,7 @@ async function clientValidation<T extends AnyZodObject>(
 
   if (valid) return { valid: true as const };
 
-  const validationResult: Validation<T> = {
+  const result: Validation<T> = {
     valid,
     errors: clientErrors,
     data: checkData,
@@ -688,5 +698,5 @@ async function clientValidation<T extends AnyZodObject>(
     id: formId
   };
 
-  return { valid: false as const, validationResult };
+  return { valid: false as const, result };
 }

src/lib/client/formEnhance.ts

@@ -107,8 +107,11 @@ export type FormOptions<T extends ZodValidation<AnyZodObject>, M> = Partial<{
       }) => MaybePromise<unknown | void>);
   dataType: 'form' | 'json';
   jsonChunkSize: number;
-  validators: false | Validators<UnwrapEffects<T>> | T;
-  delayedValidators: Validators<UnwrapEffects<T>> | T;
+  validators:
+    | false
+    | Validators<UnwrapEffects<T>>
+    | ZodValidation<UnwrapEffects<T>>;
+  delayedValidators: Validators<UnwrapEffects<T>>;
   validationMethod: 'auto' | 'oninput' | 'onblur' | 'submit-only';
   defaultValidator: 'keep' | 'clear';
   clearOnSubmit: 'errors' | 'message' | 'errors-and-message' | 'none';
@@ -587,7 +590,7 @@ export function superForm<
     return obj === true;
   }
 
-  function Tainted__validate(path: string[], taint: TaintOption) {
+  async function Tainted__validate(path: string[], taint: TaintOption) {
     if (
       options.validationMethod == 'onblur' ||
       options.validationMethod == 'submit-only'
@@ -625,15 +628,7 @@ export function superForm<
     }
 
     if (shouldValidate) {
-      validateField(
-        path,
-        options.validators,
-        options.defaultValidator,
-        Form,
-        Errors,
-        Tainted,
-        { taint }
-      );
+      await validateField(path, options, Form, Errors, Tainted, { taint });
     }
   }
 
@@ -860,8 +855,7 @@ export function superForm<
     validate: (path, opts) => {
       return validateField(
         splitPath(path) as string[],
-        options.validators,
-        options.defaultValidator,
+        options,
         Form,
         Errors,
         Tainted,