Fixed clearOnSubmit.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +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]
+
+### Changed
+
+- The [clearOnSubmit](https://superforms.rocks/concepts/submit-behavior#clearonsubmit) option didn't clear the errors when supposed to. To avoid a breaking change, **the default option for clearOnSubmit is now** `message`, not `errors-and-message`, as it didn't work anyway.
+
 ## [2.10.5] - 2024-03-18
 
 ### Added

src/lib/client/superForm.ts

@@ -349,7 +349,7 @@ const defaultFormOptions = {
 	dataType: 'form',
 	validators: undefined,
 	customValidity: false,
-	clearOnSubmit: 'errors-and-message',
+	clearOnSubmit: 'message',
 	delayMs: 500,
 	timeoutMs: 8000,
 	multipleSubmits: 'prevent',
@@ -1054,7 +1054,7 @@ export function superForm<
 		 * To work with client-side validation, errors cannot be deleted but must
 		 * be set to undefined, to know where they existed before (tainted+error check in oninput)
 		 */
-		clear: () => undefined
+		clear: () => Errors.set({})
 	};
 
 	//#endregion
@@ -1583,6 +1583,23 @@ export function superForm<
 				setTimeout(() => validationResponse({ result }), 0);
 			}
 
+			function clearOnSubmit() {
+				switch (options.clearOnSubmit) {
+					case 'errors-and-message':
+						Errors.clear();
+						Message.set(undefined);
+						break;
+
+					case 'errors':
+						Errors.clear();
+						break;
+
+					case 'message':
+						Message.set(undefined);
+						break;
+				}
+			}
+
 			function cancel(
 				opts: { resetTimers?: boolean } = {
 					resetTimers: true
@@ -1628,6 +1645,8 @@ export function superForm<
 					return await Form_validate({ adapter: validationAdapter });
 				};
 
+				clearOnSubmit();
+
 				if (!noValidate) {
 					validation = await validateForm();
 
@@ -1638,21 +1657,6 @@ export function superForm<
 				}
 
 				if (!cancelled) {
-					switch (options.clearOnSubmit) {
-						case 'errors-and-message':
-							Errors.clear();
-							Message.set(undefined);
-							break;
-
-						case 'errors':
-							Errors.clear();
-							break;
-
-						case 'message':
-							Message.set(undefined);
-							break;
-					}
-
 					if (
 						options.flashMessage &&
 						(options.clearOnSubmit == 'errors-and-message' || options.clearOnSubmit == 'message') &&

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

@@ -53,7 +53,8 @@
 		'file-component',
 		'tainted-history',
 		'files-proxy',
-		'tainted-array'
+		'tainted-array',
+		'spa-clearonsubmit'
 	].sort();
 </script>
 

src/routes/(v2)/v2/spa-clearonsubmit/+page.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { defaults, superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+	import { valibot } from '$lib/adapters/valibot.js';
+	import { schema } from './schema.js';
+
+	const data = defaults(valibot(schema));
+	data.errors.name = ['Default error'];
+	data.message = 'Submit form to remove this message.';
+
+	const { form, errors, message, enhance, submitting } = superForm(data, {
+		SPA: true,
+		validators: valibot(schema),
+		clearOnSubmit: 'errors-and-message',
+		async onUpdate({ form }) {
+			// Slow external API request
+			await new Promise((res) => setTimeout(res, 4000));
+			if (form.valid) form.message = 'IT WORKS';
+		}
+	});
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>SPA clear on submit</h3>
+
+{#if $message}
+	<!-- eslint-disable-next-line svelte/valid-compile -->
+	<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
+		{$message}
+	</div>
+{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name<br />
+		<input name="name" aria-invalid={$errors.name ? 'true' : undefined} bind:value={$form.name} />
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+
+	<label>
+		Email<br />
+		<input
+			name="email"
+			type="email"
+			aria-invalid={$errors.email ? 'true' : undefined}
+			bind:value={$form.email}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+
+	<div class="submit">
+		<button>Submit</button>
+		{#if $submitting}Loading...{/if}
+	</div>
+</form>
+
+<hr />
+<p>
+	💥 <a target="_blank" href="https://superforms.rocks">Created with Superforms for SvelteKit</a> 💥
+</p>
+
+<style>
+	.submit {
+		display: flex;
+		align-items: center;
+	}
+
+	.submit button {
+		margin: 0 0.5rem;
+	}
+
+	.invalid {
+		color: red;
+	}
+
+	.status {
+		color: white;
+		padding: 4px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	input {
+		background-color: #ddd;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	hr {
+		margin-top: 4rem;
+	}
+
+	form {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>

src/routes/(v2)/v2/spa-clearonsubmit/schema.ts

@@ -0,0 +1,6 @@
+import { object, string, email, minLength } from 'valibot';
+
+export const schema = object({
+	name: string([minLength(2)]),
+	email: string([email()])
+});