customValidity fix for submit-only and onblur validationMethods.

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]
+## [1.7.2] - 2023-09-23
 
 ### Fixed
 
-- Array and form-level errors didn't respect `submit-only` as validationMethod.
+- Array and form-level errors didn't respect `submit-only` as [validationMethod](https://superforms.rocks/concepts/client-validation#validationmethod). ([#270](https://github.com/ciscoheat/sveltekit-superforms/issues/270))
+- The [customValidity](https://superforms.rocks/concepts/error-handling#customvalidity) option didn't respect `submit-only` and `onblur` as validationMethod.
 
 ## [1.7.1] - 2023-09-19
 

src/lib/client/formEnhance.ts

@@ -135,12 +135,16 @@ export function formEnhance<T extends AnyZodObject, M>(
     event: 'blur' | 'input',
     validityEl: HTMLElement | null
   ) {
+    if (options.validationMethod == 'submit-only') return;
+
     if (options.customValidity && validityEl) {
       // Always reset validity, in case it has been validated on the server.
       if ('setCustomValidity' in validityEl) {
         (validityEl as HTMLInputElement).setCustomValidity('');
       }
 
+      if (event == 'input' && options.validationMethod == 'onblur') return;
+
       // If event is input but element shouldn't use custom validity,
       // return immediately since validateField don't have to be called
       // in this case, validation is happening elsewhere.
@@ -204,6 +208,13 @@ export function formEnhance<T extends AnyZodObject, M>(
 
   // Add input event, for custom validity
   async function checkCustomValidity(e: Event) {
+    if (
+      options.validationMethod == 'onblur' ||
+      options.validationMethod == 'submit-only'
+    ) {
+      return;
+    }
+
     if (timingIssue(e.target)) {
       await new Promise((r) => setTimeout(r, 0));
     }
@@ -222,6 +233,7 @@ export function formEnhance<T extends AnyZodObject, M>(
       }
     }
   }
+
   if (options.customValidity) {
     formEl.addEventListener('input', checkCustomValidity);
   }

src/routes/tests/custom-validity/+page.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-  import { superForm } from '$lib/client';
   import type { PageData } from './$types';
-  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
   import { schema } from './schema';
 
   export let data: PageData;
 
-  const { form, errors, tainted, message, enhance, constraints } = superForm(
-    data.form,
-    {
-      customValidity: true,
-      validators: schema
-    }
-  );
+  const validationMethod =
+    ($page.url.searchParams.get('method') as any) ?? 'auto';
+
+  const { form, errors, message, enhance } = superForm(data.form, {
+    customValidity: true,
+    validators: schema,
+    validationMethod,
+    taintedMessage:
+      validationMethod == 'auto'
+        ? 'You have unsaved changes. Leave page?'
+        : null
+  });
 </script>
 
 {#if $message}<h4>{$message}</h4>{/if}
 
-<form method="POST" use:enhance>
+<form novalidate method="POST" use:enhance>
   <label>
     Name: <input name="name" bind:value={$form.name} />
   </label>
@@ -76,6 +82,10 @@
   </label>
 </form>
 
+{#if validationMethod != 'auto'}
+  <p>Validation method: <b>{validationMethod}</b></p>
+{/if}
+
 <!--SuperDebug data={{ $form, $errors }} /-->
 
 <style lang="scss">