customRequest didn't cancel when client-side validation failed.

Author: ciscoheat

CHANGELOG.md

@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Support for Vine 2.0.
 
+### Fixed
+
+- [customRequest](https://superforms.rocks/concepts/events#customrequest) didn't cancel when client-side validation failed.
+
 ## [2.20.0] - 2024-10-18
 
 ### Added

src/lib/client/superForm.ts

@@ -2044,8 +2044,8 @@ export function superForm<
 				unsubCheckforNav();
 			}
 
-			if (customRequest) {
-				if (!cancelled) _submitCancel();
+			if (!cancelled && customRequest) {
+				_submitCancel();
 				const response = await customRequest(submitParams);
 
 				let result: ActionResult;

src/routes/(v2)/v2/customrequest-validate/+page.server.ts

@@ -0,0 +1,26 @@
+import { superValidate } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema.js';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		console.log('==================================================================');
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		form.message = 'Form posted!';
+
+		if (!form.valid) return fail(400, { form });
+
+		return { form };
+	}
+};

src/routes/(v2)/v2/customrequest-validate/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { zod } from '$lib/adapters/zod.js';
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+	import type { PageData } from './$types.js';
+	import { schema } from './schema.js';
+
+	export let data: PageData;
+
+	const { form, errors, message, enhance } = superForm(data.form, {
+		taintedMessage: null,
+		validators: zod(schema),
+		onSubmit({ customRequest }) {
+			return customRequest(async (input) => {
+				const formEntriesUrlEncoded = new URLSearchParams();
+				for (const [key, value] of input.formData.entries()) {
+					if (typeof value === 'string') {
+						formEntriesUrlEncoded.append(key, value);
+					}
+				}
+
+				const response = await fetch(input.action, {
+					method: 'POST',
+					body: formEntriesUrlEncoded,
+					headers: {
+						'x-sveltekit-action': 'true',
+						Accept: 'application/json',
+						'Content-Type': 'application/x-www-form-urlencoded'
+					},
+					credentials: 'include'
+				});
+
+				console.log('sent');
+
+				return response;
+			});
+		}
+	});
+</script>
+
+<SuperDebug data={{ $form, $errors }} />
+
+<h2>customRequest check</h2>
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/customrequest-validate/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});