customValidity didn't clear without client-side validators.

Author: ciscoheat

CHANGELOG.md

@@ -9,14 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- "SPA action mode", the `SPA` option can now take a string, corresponding to a form action, and it will post there, even without a html form on the page.
+- "SPA action mode", the `SPA` option can now take a string, corresponding to a form action, and it will post there, even without a html form on the page. Especially useful for debounced server checks like available usernames.
 
 ### Fixed
 
 - Fixed types for constraints, tainted and errors when using intersections and unions in schemas.
 - Fixed SuperDebug collapsed height by preventing global css leak.
 - Redirect in SPA mode cancelled normal redirects, preventing applyAction.
 - Default objects sent to `superForm` returned a form with an empty id, causing collisions, it is now a random string.
+- `customValidity` didn't clear without client-side validators.
 
 ## [2.8.1] - 2024-03-07
 

src/lib/client/superForm.ts

@@ -758,14 +758,23 @@ export function superForm<
 			setTimeout(() => Form__changeEvent(event));
 		}
 
-		if (!event || !options.validators || options.validators == 'clear') return;
+		let skipValidation = false;
 
 		if (!force) {
 			if (options.validationMethod == 'onsubmit' || options.validationMethod == 'submit-only') {
-				return;
+				skipValidation = true;
+			} else if (options.validationMethod == 'onblur' && event?.type == 'input')
+				skipValidation = true;
+			else if (options.validationMethod == 'oninput' && event?.type == 'blur')
+				skipValidation = true;
+		}
+
+		if (skipValidation || !event || !options.validators || options.validators == 'clear') {
+			if (event?.paths) {
+				const formElement = event?.formElement ?? EnhancedForm;
+				if (formElement) Form__clearCustomValidity(formElement, event.paths);
 			}
-			if (options.validationMethod == 'onblur' && event.type == 'input') return;
-			if (options.validationMethod == 'oninput' && event.type == 'blur') return;
+			return;
 		}
 
 		const result = await Form_validate({ adapter });
@@ -782,21 +791,13 @@ export function superForm<
 		return result;
 	}
 
-	async function Form__displayNewErrors(
-		errors: ValidationErrors<T>,
-		event: FullChangeEvent,
-		force: boolean
+	function Form__clearCustomValidity(
+		formElement: HTMLFormElement,
+		paths: (string | number | symbol)[][]
 	) {
-		const { type, immediate, multiple, paths } = event;
-		const previous = Data.errors;
-
-		const output: Record<string, unknown> = {};
 		const validity = new Map<string, { el: HTMLElement; message: string }>();
-
-		const formElement = event.formElement ?? EnhancedForm;
-
 		if (options.customValidity && formElement) {
-			for (const path of event.paths) {
+			for (const path of paths) {
 				const name = CSS.escape(mergePath(path));
 				const el = formElement.querySelector<HTMLElement>(`[name="${name}"]`);
 				if (el) {
@@ -806,6 +807,22 @@ export function superForm<
 				}
 			}
 		}
+		return validity;
+	}
+
+	async function Form__displayNewErrors(
+		errors: ValidationErrors<T>,
+		event: FullChangeEvent,
+		force: boolean
+	) {
+		const { type, immediate, multiple, paths } = event;
+		const previous = Data.errors;
+
+		const output: Record<string, unknown> = {};
+		let validity = new Map<string, { el: HTMLElement; message: string }>();
+
+		const formElement = event.formElement ?? EnhancedForm;
+		if (formElement) validity = Form__clearCustomValidity(formElement, event.paths);
 
 		traversePaths(errors, (error) => {
 			if (!Array.isArray(error.value)) return;

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

@@ -48,7 +48,8 @@
 		'syncflash',
 		'redirect-login',
 		'debounce-username',
-		'mixed-forms'
+		'mixed-forms',
+		'custom-validity'
 	].sort();
 </script>
 

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

@@ -0,0 +1,20 @@
+import { superValidate, message } 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 }) => {
+		const form = await superValidate(request, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Form posted successfully!');
+	}
+};

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/index.js';
+
+	export let data;
+
+	const { form, errors, message, enhance } = superForm(data.form, {
+		customValidity: true
+	});
+
+	// eslint-disable-next-line svelte/valid-compile
+	$page;
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>Superforms testing ground - Zod</h3>
+
+{#if $message}
+	<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>
+
+	<button>Submit</button>
+</form>
+
+<hr />
+<p><a target="_blank" href="https://superforms.rocks/api">API Reference</a></p>
+
+<style>
+	.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/custom-validity/schema.ts

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