Respecting novalidate and formnovalidate.

Author: ciscoheat

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - When cancelling a request, timers were cancelled too early in [SPA mode](https://superforms.rocks/concepts/spa) and when [client-side validation](https://superforms.rocks/concepts/client-validation) failed.
 - [Proxies](https://superforms.rocks/concepts/proxy-objects) didn't set or update a nested path unless it previously existed.
 - The when the [taint option](https://superforms.rocks/concepts/tainted#tainted-store) was set to `false`, client-side validation was prevented.
+- The `novalidate` and `formnovalidate` attributes on forms and buttons weren't respected.
 
 ## [1.10.2] - 2023-11-14
 

src/lib/client/clientValidation.ts

@@ -71,14 +71,14 @@ export function validateForm<T extends AnyZodObject>(
  * Validate form data.
  */
 export async function clientValidation<T extends AnyZodObject, M = unknown>(
-  options: FormOptions<T, M>,
+  validators: FormOptions<T, M>['validators'],
   checkData: z.infer<T>,
   formId: string | undefined,
   constraints: SuperValidated<ZodValidation<T>>['constraints'],
   posted: boolean
 ) {
   return _clientValidation(
-    options.validators,
+    validators,
     checkData,
     formId,
     constraints,

src/lib/client/formEnhance.ts

@@ -285,7 +285,12 @@ export function formEnhance<T extends AnyZodObject, M>(
     } else {
       // Client validation
       const validation = await clientValidation(
-        options,
+        formEl.noValidate ||
+          ((submit.submitter instanceof HTMLButtonElement ||
+            submit.submitter instanceof HTMLInputElement) &&
+            submit.submitter.formNoValidate)
+          ? undefined
+          : options.validators,
         get(data),
         get(formId),
         get(constraints),

src/lib/client/index.ts

@@ -919,7 +919,7 @@ export function superForm<
   ) {
     if (path === undefined) {
       return clientValidation<UnwrapEffects<T>, M>(
-        options,
+        options.validators,
         get(Form),
         _formId,
         get(Constraints),

src/routes/tests/array-component/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { arrayProxy, superForm } from '$lib/client';
+  import { superForm } from '$lib/client';
   import type { PageData } from './$types';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
   import AutoComplete from './AutoComplete.svelte';
   import { schema } from './schema';
 
   export let data: PageData;
 
+  let novalidate = false;
+
   const pageForm = superForm(data.form, {
     dataType: 'json',
     validators: schema
@@ -23,10 +25,16 @@
 
 {#if $message}<h4>{$message}</h4>{/if}
 
-<form method="POST" use:enhance>
+<form {novalidate} method="POST" use:enhance>
   <AutoComplete form={pageForm} field="sub.tags" {options} taint={false} />
-  <div>
+  <div style="margin-top:1rem;">
     <button>Submit</button>
+    <button formnovalidate>Submit formnovalidate</button>
+    <input
+      type="checkbox"
+      bind:checked={novalidate}
+      on:click={() => (novalidate = !novalidate)}
+    /> novalidate on form
   </div>
 </form>
 

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

@@ -23,7 +23,7 @@
 
 {#if $message}<h4>{$message}</h4>{/if}
 
-<form novalidate method="POST" use:enhance>
+<form method="POST" use:enhance>
   <label>
     Name: <input name="name" bind:value={$form.name} />
   </label>