Add a prop so the Form's FieldErrors component only shows one error, rather than them all?

[gregmsanderson]

Describe the feature

Perhaps this is just me, but it could be useful for other people :)

I added a form using the various Form components. The default behaviour is to list all validation errors under each field. Personally I didn't like the look of that so I wondered how to only show the first one 🤔.

Perhaps in the form validation schema? Seems not. Superforms supports a variety of libraries but e.g Zod doesn't make it easy: colinhacks/zod#1403 VineJS does have a "bail mode" (https://vinejs.dev/docs/schema_101#bail-mode) ... but that is only for the back-end.

What about in Superforms. Or Formsnap? Again, neither seems to have a "bail" or "abort" option ...

So ... that leaves the Form components. I added a prop of "bail" and it seems to work:

<Form.FieldErrors bail={true} />

form-field-errors.svete

<script>
	import * as FormPrimitive from 'formsnap';
	import { cn } from '$lib/utils';
	let className = undefined;
	export { className as class };
	export let errorClasses = undefined;
        export let bail = false; // <- (aka abort-only) on the first of any validation errors
</script>

<FormPrimitive.FieldErrors
	class={cn('text-[0.8rem] font-medium text-destructive', className)}
	{...$$restProps}
	let:errors
	let:fieldErrorsAttrs
	let:errorAttrs
>
	<slot {errors} {fieldErrorsAttrs} {errorAttrs}>
		{#each errors as error, i}
			{#if !bail || i === 0}
				<div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
			{/if}
		{/each}
	</slot>
</FormPrimitive.FieldErrors>

It defaults to false (show all errors, as now). If set as true, it only shows the first of any validation error.

Would this be useful to anyone else? I can PR if so. If not, feel free to close this issue :)

[shyakadavis]

Hi;

I can't speak for other validators, but Valibot has an option that could help called abortPipeEarly that's configured at the schema/superValidate level.

It was recently added, ciscoheat/sveltekit-superforms#349, and though I haven't found the time to test, it might meet such needs.

---

As for an optional/general solution, I'm not sure, but in does sound, at least to me, like something neat to have.

[gregmsanderson]

@shyakadavis Ah, interesting, thanks. I've never heard of Valibot. Looks neat though.

[shyakadavis]

To be honest, I want to try switching completely to Valibot, because of how tree-shakable it is.

I've seen numerous articles/debates about how zod is overkill for simple tasks, and how its bundle size is just too large. In that spirit, I wish to try for myself some alternatives and see.

Plus, day after day I see some perks like that pipe, and wins me over just a little more. 🙂

[huntabyte]

At this time, this isn't something we'll add as a part of the project itself. We try to stick to "sensible defaults" that you can then easily extend as you have in your example! We want to keep the amount of internal component clutter at a minimum, so we don't have extra code for people who don't need all the bells and whistles.

[gregmsanderson]

No problem.

Out of interest I replaced Zod with Valibot as mentioned by @shyakadavis and it does bring down the bundle e.g

With zod
.svelte-kit/output/client/_app/immutable/chunks/zod.CTQwyCd-.js 112.99 kB │ gzip: 31.52 kB

With valibot
.svelte-kit/output/client/_app/immutable/chunks/valibot.PXfvYtXL.js 75.57 kB │ gzip: 24.31 kB

So it sounds like it could be done by that instead :)