Fixed client-side validation for Date schema fields.

Author: ciscoheat

CHANGELOG.md

@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- The warning shown when using multiple forms with the same id, is now working on `superForm` instantiation, not just when new form data is received.
+- When multiple forms exists with the same id, the warning is now displayed on `superForm` instantiation, not just when new form data is received.
+- Fixed client-side validation for `Date` schema fields.
 
 ## [1.3.0] - 2023-07-14
 

src/lib/traversal.ts

@@ -213,22 +213,23 @@ export function comparePaths(newObj: unknown, oldObj: unknown) {
     if (data.isLeaf) {
       if (!exists) {
         addDiff();
-      } else if (
+      } else if (data.value !== exists.value) {
+        addDiff();
+      }
+    } else if (exists) {
+      if (
         data.value instanceof Date &&
         exists.value instanceof Date &&
         data.value.getTime() != exists.value.getTime()
       ) {
         addDiff();
-      } else if (data.value !== exists.value) {
+      } else if (
+        data.value instanceof Set &&
+        exists.value instanceof Set &&
+        !eqSet(data.value, exists.value)
+      ) {
         addDiff();
       }
-    } else if (
-      exists &&
-      data.value instanceof Set &&
-      exists.value instanceof Set &&
-      !eqSet(data.value, exists.value)
-    ) {
-      addDiff();
     }
   }
 

src/routes/tests/datetime-local/+page.server.ts

@@ -0,0 +1,23 @@
+import type { Actions, PageServerLoad } from './$types';
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+export const load = (async () => {
+  const form = await superValidate(schema);
+  return { form };
+}) satisfies PageServerLoad;
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    console.log(formData);
+
+    const form = await superValidate(formData, schema);
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Posted OK!');
+  }
+} satisfies Actions;

src/routes/tests/datetime-local/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { dateProxy, superForm, superValidateSync } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+
+  const { errors, enhance, form, tainted } = superForm(
+    superValidateSync(schema),
+    {
+      SPA: true,
+      validators: schema,
+      dataType: 'json',
+      onSubmit({ cancel }) {
+        if (!$tainted) cancel();
+      },
+      onUpdate({ form }) {
+        if (form.valid) alert('valid');
+        else alert('invalid');
+      }
+    }
+  );
+
+  const date = dateProxy(form, 'date', {
+    format: 'datetime-local',
+    empty: 'undefined'
+  });
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+<form method="POST" use:enhance>
+  <label>
+    Name: <input name="date" type="datetime-local" bind:value={$date} />
+    {#if $errors.date}<span class="invalid">{$errors.date}</span>{/if}
+  </label>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+
+<style lang="scss">
+  form {
+    margin: 2rem 0;
+
+    input {
+      background-color: #dedede;
+    }
+
+    .invalid {
+      color: crimson;
+    }
+  }
+</style>

src/routes/tests/datetime-local/schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  date: z
+    .date()
+    .min(new Date('2021-01-01'))
+    .max(new Date('2023-07-01'), 'Max date: 2023-07-01')
+    .optional()
+});