Fixed event error path for objects and arrays

ciscoheat · Mar 19, 2024 · 3c1346d · 3c1346d
1 parent 99765c4
commit 3c1346d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/lib/client/superForm.ts b/src/lib/client/superForm.ts
@@ -840,12 +840,12 @@ export function superForm<
 				currentPath.pop();
 			}
 
+			const joinedPath = currentPath.join('.');
+
 			function addError() {
 				//console.log('Adding error', `[${error.path.join('.')}]`, error.value); //debug
 				setPaths(output, [error.path], error.value);
 
-				const joinedPath = currentPath.join('.');
-
 				if (options.customValidity && isEventError && validity.has(joinedPath)) {
 					const { el, message } = validity.get(joinedPath)!;
 
@@ -859,10 +859,16 @@ export function superForm<
 
 			if (force) return addError();
 
+			const lastPath = error.path[error.path.length - 1];
+			const isObjectError = lastPath == '_errors';
+
 			const isEventError =
 				error.value &&
 				paths.some((path) => {
-					return currentPath && path && currentPath.length > 0 && currentPath[0] == path[0];
+					// If array/object, any part of the path can match. If not, exact match is required
+					return isObjectError
+						? currentPath && path && currentPath.length > 0 && currentPath[0] == path[0]
+						: joinedPath == path.join('.');
 				});
 
 			if (isEventError && options.validationMethod == 'oninput') return addError();
@@ -890,10 +896,6 @@ export function superForm<
 				return addError();
 			}
 
-			const lastPath = error.path[error.path.length - 1];
-			const isObjectError = lastPath == '_errors';
-			//const isErrorInArray = error.path.some((p) => /^\d+$/.test(String(p)));
-
 			if (isObjectError) {
 				// New object errors should be displayed on blur events,
 				// or the (parent) path is or has been tainted.

diff --git a/src/routes/(v1)/tests/tainted-array/+page.svelte b/src/routes/(v1)/tests/tainted-array/+page.svelte
@@ -33,23 +33,23 @@
 
 <button on:click={addPerson}>Add Person</button>
 
-<form use:enhance>
+<form method="POST" use:enhance>
 	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 	{#each $form.people as _, i}
 		<div>
 			<div>
 				<label for="firstName">First Name</label>
 				<input name="firstName" bind:value={$form.people[i].firstName} />
 				{#if $errors.people?.[i]?.firstName}
-					<p>{$errors.people[i].firstName}</p>
+					<p id="error-1">{$errors.people[i].firstName}</p>
 				{/if}
 			</div>
 
 			<div>
 				<label for="lastName">Last Name</label>
 				<input name="lastName" bind:value={$form.people[i].lastName} />
 				{#if $errors.people?.[i]?.lastName}
-					<p>{$errors.people[i].lastName}</p>
+					<p id="error-2">{$errors.people[i].lastName}</p>
 				{/if}
 			</div>
 		</div>