Fixed client validation problems with multi-select fields.

Author: ciscoheat

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `capture` and `restore` are now hoisted functions.
 - Fixed timing issues with radio buttons and validation with side-effects.
 - Using standard array access to fix problems with iOS and iPadOS <= 15.3
+- Fixed client validation problems with multi-select fields.
 
 ## [0.8.4] - 2023-04-27
 

src/lib/client/index.ts

@@ -1096,6 +1096,20 @@ async function validateField<T extends AnyZodObject, M>(
         perFieldValidator.key
       );
       if (validator) {
+        // Check if validator is ZodArray and the path is an array access
+        // in that case validate the whole array.
+        if (
+          Context.currentData &&
+          validator._def.typeName == 'ZodArray' &&
+          !isNaN(parseInt(path[path.length - 1]))
+        ) {
+          const validateArray = traversePath(
+            Context.currentData,
+            path.slice(0, -1) as FieldPath<typeof Context.currentData>
+          );
+          Context.value = validateArray?.value;
+        }
+
         //console.log('🚀 ~ file: index.ts:972 ~ no effects:', validator);
         const result = await validator.safeParseAsync(Context.value);
         if (!result.success) {

src/routes/+layout.svelte

@@ -26,21 +26,23 @@
   <a href="/super-debug">SuperDebug</a> |
   <a href="/nested">Nested</a> |
   <a href="/multiple">Multiple</a> |
-  <a href="/multiple2">Multiple 2</a>
   <br />
+  <a href="/multiple2">Multiple 2</a>
   <a href="/snapshot">Snapshot</a> |
   <a href="/dates">Dates</a> |
   <a href="/reset">Reset</a> |
   <a href="/url">URL</a> |
   <a href="/tainted">Tainted</a> |
-  <a href="/proxies">Proxies</a> |
-  <a href="/properly-nested">Properly nested</a>
+  <a href="/proxies">Proxies</a>
   <br />
+  <a href="/properly-nested">Properly nested</a>
   <a href="/files">Files</a> |
   <a href="/spa">SPA</a> |
   <a href="/nested-validation">Client-side validation</a> |
-  <a href="/tests/rex">Side-effect validation</a> |
-  <a href="/tests/superform-c">Side-effect 2</a>
+  <a href="/tests/rex">Side-effect validation</a>
+  <br />
+  <a href="/tests/superform-c">Side-effect 2</a> |
+  <a href="/tests/multiselect">Multi-select</a>
 </nav>
 
 <slot />

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

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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { formSchema, optionsSchema } from './schemas';
+
+  export let data;
+
+  const { form, enhance, message, errors, allErrors, tainted } = superForm(
+    data.form,
+    {
+      dataType: 'json',
+      validators: formSchema,
+      validationMethod: 'onblur',
+      defaultValidator: 'clear'
+    }
+  );
+
+  $: console.log($allErrors);
+  $: options = optionsSchema._def.innerType.options;
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<p>{$message}</p>{/if}
+
+<form method="POST" use:enhance>
+  <div>
+    <label for="multiselect">Multiselect</label>
+    <select
+      multiple
+      name="multiselect"
+      bind:value={$form.multiselect}
+      data-invalid={$errors.multiselect}
+    >
+      {#each options as option}
+        <option value={option}>{option}</option>
+      {/each}
+    </select>
+  </div>
+  <div>
+    <label for="select">Select</label>
+    <select
+      name="select"
+      bind:value={$form.select}
+      data-invalid={$errors.select}
+    >
+      {#each options as option}
+        <option value={option}>{option}</option>
+      {/each}
+    </select>
+  </div>
+  {#if $allErrors && $allErrors.length}
+    <ul class="invalid">
+      {#each $allErrors as error}<li>
+          {String(error.path)}: {error.message}
+        </li>{/each}
+    </ul>
+  {/if}
+
+  <button type="submit">Submit</button>
+</form>
+
+<style>
+  label {
+    display: block;
+    margin-left: 5px;
+  }
+  input {
+    margin: 5px;
+  }
+  .invalid {
+    color: red;
+  }
+  button {
+    background-color: black;
+    color: white;
+    padding: 5px;
+    display: inline-block;
+    margin: 5px;
+  }
+</style>

src/routes/tests/multiselect/schemas.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const optionsSchema = z
+  .enum(['option_1', 'option_2', 'option_3', 'option_4'])
+  .default('option_1');
+
+export const formSchema = z.object({
+  multiselect: optionsSchema.array(),
+  select: optionsSchema
+});