Nested Superforms validators didn't work when a field was missing compared to the schema.

Author: ciscoheat

CHANGELOG.md

@@ -5,11 +5,12 @@ 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] - 2023-09-11
+## [1.7.0] - 2023-09-16
 
 ### Fixed
 
 - Type error with `formFieldProxy` when using a strongly typed status message. ([#260](https://github.com/ciscoheat/sveltekit-superforms/issues/260))
+- Nested Superforms validators didn't work when a field was missing compared to the schema.
 
 ### Added
 

src/lib/client/clientValidation.ts

@@ -504,16 +504,12 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
     }
   } else {
     // SuperForms validator
-
     const validator = traversePath(
       validators,
       Context.validationPath as FieldPath<typeof validators>
     );
 
-    if (!validator) {
-      // Path didn't exist
-      throw new SuperFormError('No Superforms validator found: ' + path);
-    } else if (validator.value === undefined) {
+    if (!validator || validator.value === undefined) {
       // No validator, use default
       return defaultValidate();
     } else {

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

@@ -0,0 +1,26 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema';
+
+import type { Actions, PageServerLoad } from './$types';
+
+///// Load function /////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions /////
+
+export const actions: 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-266/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  export let data;
+
+  const { form, errors, message, enhance } = superForm(data.form, {
+    dataType: 'json',
+    taintedMessage: null,
+    validators: {
+      business_id: (input) =>
+        input ? undefined : 'Please fill business name first'
+      /*
+      // Uncomment for testing purposes, but will fail browser test
+      shareholders: {
+        id_issuance_date: (date) => (date ? 'Nope' : null)
+      }
+      */
+    },
+    onError({ result, message }) {
+      console.log('error');
+      console.log(result);
+      console.log(message);
+    }
+  });
+</script>
+
+<h3>Add shareholder</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  <label>
+    Business name
+    <input bind:value={$form.business_id} />
+    {#if $errors.business_id}<span class="invalid"
+        >{$errors.business_id}</span
+      >{/if}
+  </label>
+
+  <button
+    type="button"
+    on:click={() =>
+      ($form.shareholders = [
+        ...$form.shareholders,
+        { id_issuance_date: new Date() }
+      ])}>Add shareholder</button
+  >
+
+  {#if $errors?.shareholders?._errors}
+    <div class="invalid">{$errors.shareholders._errors}</div>
+  {/if}
+
+  {#each $form.shareholders as _, i}
+    {@const error = $errors?.shareholders?.[i]?.id_issuance_date}
+    <label>
+      Issuance date<br />
+      <input
+        aria-invalid={error ? 'true' : undefined}
+        bind:value={$form.shareholders[i].id_issuance_date}
+      />
+      {#if error}
+        <span class="invalid"
+          >{$errors?.shareholders?.[i].id_issuance_date}</span
+        >
+      {/if}
+    </label>
+  {/each}
+
+  <div>
+    <br />
+    <button>Submit</button>
+  </div>
+</form>
+
+<SuperDebug data={{ $form, $errors }} />
+
+<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-266/schema.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  business_id: z.string(),
+  shareholders: z
+    .object({
+      first_name: z.string().optional(),
+      middle_name: z.string().optional(),
+      id_issuance_date: z.coerce.date().max(new Date()).optional()
+    })
+    .array()
+    .min(1)
+});