customValidity now handles objects.

Author: ciscoheat

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Inlined the [SuperDebug](https://superforms.rocks/super-debug) css, to prevent it from being automatically bundled due to it being a default import.
+- The [customValidity](https://superforms.rocks/concepts/error-handling#customvalidity) option now handles object errors, and can refer to any part of the schema.
 
 ## [2.14.0] - 2024-05-26
 

src/lib/client/customValidity.ts

@@ -25,9 +25,14 @@ export function setCustomValidityForm(
 			continue;
 		}
 
-		const error = traversePath(errors, splitPath(el.name));
-		setCustomValidity(el, error?.value);
-		if (error?.value) return;
+		const path = traversePath(errors, splitPath(el.name));
+		const error =
+			path && typeof path.value === 'object' && '_errors' in path.value
+				? path.value._errors
+				: path?.value;
+
+		setCustomValidity(el, error);
+		if (error) return;
 	}
 }
 

src/lib/client/superForm.ts

@@ -778,7 +778,7 @@ export function superForm<
 		if (skipValidation || !event || !options.validators || options.validators == 'clear') {
 			if (event?.paths) {
 				const formElement = event?.formElement ?? EnhancedForm_get();
-				if (formElement) Form__clearCustomValidity(formElement, event.paths);
+				if (formElement) Form__clearCustomValidity(formElement);
 			}
 			return;
 		}
@@ -797,20 +797,14 @@ export function superForm<
 		return result;
 	}
 
-	function Form__clearCustomValidity(
-		formElement: HTMLFormElement,
-		paths: (string | number | symbol)[][]
-	) {
+	function Form__clearCustomValidity(formElement: HTMLFormElement) {
 		const validity = new Map<string, { el: HTMLElement; message: string }>();
 		if (options.customValidity && formElement) {
-			for (const path of paths) {
-				const name = CSS.escape(mergePath(path));
-				const el = formElement.querySelector<HTMLElement>(`[name="${name}"]`);
-				if (el) {
-					const message = 'validationMessage' in el ? String(el.validationMessage) : '';
-					validity.set(path.join('.'), { el, message });
-					updateCustomValidity(el, undefined);
-				}
+			for (const el of formElement.querySelectorAll<HTMLElement & { name: string }>(`[name]`)) {
+				if (typeof el.name !== 'string' || !el.name.length) continue;
+				const message = 'validationMessage' in el ? String(el.validationMessage) : '';
+				validity.set(el.name, { el, message });
+				updateCustomValidity(el, undefined);
 			}
 		}
 		return validity;
@@ -828,7 +822,7 @@ export function superForm<
 		let validity = new Map<string, { el: HTMLElement; message: string }>();
 
 		const formElement = event.formElement ?? EnhancedForm_get();
-		if (formElement) validity = Form__clearCustomValidity(formElement, event.paths);
+		if (formElement) validity = Form__clearCustomValidity(formElement);
 
 		traversePaths(errors, (error) => {
 			if (!Array.isArray(error.value)) return;
@@ -848,7 +842,7 @@ export function superForm<
 					const { el, message } = validity.get(joinedPath)!;
 
 					if (message != error.value) {
-						updateCustomValidity(el, error.value);
+						setTimeout(() => updateCustomValidity(el, error.value));
 						// Only need one error to display
 						validity.clear();
 					}

src/routes/(v2)/v2/Navigation.svelte

@@ -61,7 +61,8 @@
 		'reset-errors',
 		'schemasafe-types',
 		'discriminated-union',
-		'simple-tainted'
+		'simple-tainted',
+		'validity-objects'
 	].sort();
 </script>
 

src/routes/(v2)/v2/validity-objects/+page.server.ts

@@ -0,0 +1,33 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(
+		{
+			priceRules: [
+				{
+					priceCategory: { value: '' }
+				}
+			]
+		},
+		zod(schema),
+		{ errors: false }
+	);
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/validity-objects/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { zod } from '$lib/adapters/zod.js';
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false,
+		dataType: 'json',
+		customValidity: true,
+		validators: zod(schema)
+	});
+</script>
+
+<SuperDebug data={{ $form }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			bind:value={$form.priceRules[0].priceCategory.value}
+			type="text"
+			name="priceRules"
+		/>
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+	}
+</style>

src/routes/(v2)/v2/validity-objects/schema.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	priceRules: z
+		.array(
+			z.object({
+				priceCategory: z.object({
+					value: z.string().min(2)
+				})
+			})
+		)
+		.min(2)
+});