Realtime validation didn't work for Zod schemas without effects.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +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).
 
+## [0.8.1] - 2023-04-24
+
+### Fixed
+
+- Realtime validation didn't work for Zod schemas without effects.
+
 ## [0.8.0] - 2023-04-22
 
 ### Changed

src/index.test.ts

@@ -160,10 +160,12 @@ test('FormData array data', async () => {
 });
 
 test('Nullable values', async () => {
-  const schema = z.object({
+  const refinedSchema = z.object({
     scopeId: z.number().int().min(1),
     name: z.string().nullable()
-  });
+  }).refine(data => data);
+
+  const schema = refinedSchema._def.schema
 
   const output = defaultData(schema);
   expect(output.scopeId).equals(0);

src/lib/client/index.ts

@@ -915,11 +915,15 @@ async function validateField<T extends AnyZodObject, M>(
   const validationPath = path.filter((p) => isNaN(parseInt(p)));
 
   function extractValidator(data: any, key: string) {
-    const objectShape = data?._def?.schema?.shape;
-    if (objectShape) return objectShape[key];
+    const def = data?._def
 
-    const arrayShape = data?.element?.shape;
-    if (arrayShape) return arrayShape[key];
+    if(def) {
+      const objectShape = 'shape' in def ? def.shape() : def.schema?.shape;
+      if (objectShape) return objectShape[key];
+
+      const arrayShape = data?.element?.shape;
+      if (arrayShape) return arrayShape[key];
+    }
 
     throw new SuperFormError(
       'Invalid Zod validator for ' + key + ': ' + data

src/routes/tests/rex/+page.server.ts

@@ -0,0 +1,27 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { schema } from './schema';
+import { message, superValidate } from '$lib/server';
+
+export const load = (async () => {
+	// Server API:
+	const form = await superValidate(schema);
+
+	// Always return { form } in load and form actions.
+	return { form };
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, schema);
+		console.log('POST', form);
+
+		// Convenient validation check:
+		if (!form.valid) {
+			// Again, always return { form } and things will just work.
+			return fail(400, { form });
+		}
+
+		return message(form, 'Success');
+	}
+};

src/routes/tests/rex/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { superForm } from '$lib/client';
+  import { schema } from './schema';
+  import { page } from '$app/stores';
+
+  export let data: PageData;
+
+  // Client API:
+  const { form, errors, constraints, message, enhance } = superForm(
+    data.form,
+    {
+      validators: schema,
+      validationMethod: ($page.url.searchParams.get('method') ??
+        undefined) as any
+    }
+  );
+</script>
+
+<h4>Validation method: {$page.url.searchParams.get('method') ?? 'auto'}</h4>
+
+<form method="POST" use:enhance>
+  {#if $message}
+    <div>Message: {$message}</div>
+    <br />
+  {/if}
+  <label for="name">Name</label>
+  <input
+    type="text"
+    name="name"
+    data-invalid={$errors.name}
+    bind:value={$form.name}
+  />
+  <!-- {...$constraints.name} -->
+  {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+
+  <label for="email">E-mail</label>
+  <input
+    type="text"
+    name="email"
+    data-invalid={$errors.email}
+    bind:value={$form.email}
+  />
+  <!-- {...$constraints.email} -->
+  {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+
+  <div><button>Submit</button></div>
+</form>
+
+<style>
+  .invalid {
+    color: red;
+  }
+</style>

src/routes/tests/rex/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(4).default('Hello world!'),
+	email: z.string().email()
+})