Array and form-level errors didn't respect submit-only as validationMethod.

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).
 
+## [Unreleased]
+
+### Fixed
+
+- Array and form-level errors didn't respect `submit-only` as validationMethod.
+
 ## [1.7.1] - 2023-09-19
 
 ### Fixed

src/lib/client/index.ts

@@ -639,13 +639,6 @@ export function superForm<
     path: string[],
     taint: TaintOption<UnwrappedT>
   ) {
-    if (
-      options.validationMethod == 'onblur' ||
-      options.validationMethod == 'submit-only'
-    ) {
-      return false;
-    }
-
     let shouldValidate = options.validationMethod === 'oninput';
 
     if (!shouldValidate) {
@@ -720,11 +713,21 @@ export function superForm<
         return tainted;
       });
 
-      let updated = false;
-      for (const path of paths) {
-        updated = updated || (await Tainted__validate(path, taintOptions));
+      if (
+        !(
+          options.validationMethod == 'onblur' ||
+          options.validationMethod == 'submit-only'
+        )
+      ) {
+        let updated = false;
+
+        for (const path of paths) {
+          updated = updated || (await Tainted__validate(path, taintOptions));
+        }
+        if (!updated) {
+          await validateObjectErrors(options, get(Form), Errors);
+        }
       }
-      if (!updated) await validateObjectErrors(options, get(Form), Errors);
     }
   }
 

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

@@ -0,0 +1,35 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { z } from 'zod';
+
+import type { Actions, PageServerLoad } from './$types';
+
+const schema = z.object({
+  myString: z.string().min(10),
+  myArray: z
+    .number()
+    .array()
+    .default([-1])
+    .refine((arg) => arg.every((n) => n >= 0), 'All numbers must >= 0')
+});
+
+///// 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-270/+page.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import { z } from 'zod';
+
+  export let data;
+
+  const { form, errors, message, enhance, allErrors } = superForm(
+    data.form,
+    {
+      taintedMessage: null,
+      validationMethod: 'submit-only',
+      validators: z.object({
+        myString: z.string().min(10),
+        myArray: z
+          .number()
+          .array()
+          .default([-1])
+          .refine((arg) => arg.every((n) => n >= 0), 'All numbers must >= 0')
+      })
+    }
+  );
+</script>
+
+<h3>Submit-only validation</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<p>
+  {#each $allErrors as error}
+    {error.path}: {error.messages}<br />
+  {/each}
+</p>
+
+<form method="POST" use:enhance>
+  <label>
+    My String<br />
+    <input
+      name="myString"
+      aria-invalid={$errors.myString ? 'true' : undefined}
+      bind:value={$form.myString}
+    />
+  </label>
+
+  <!-- <label>
+    My Array[0]<br />
+    <input
+      name="myArray[0]"
+      type="text"
+      aria-invalid={$errors.myArray ? 'true' : undefined}
+      bind:value={$form.myArray[0]}
+    />
+  </label> -->
+
+  <button>Submit</button>
+</form>
+
+<style>
+  .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;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>