[question] [Sveltekit] How to validate on submit?

[m0nm]

Hello, Great package btw,

The behavior I'm trying to achieve is to show the validation errors after the user submit the form, the default behavior is validating on keydown as soon as the input is touched.

Here is the solution that i tried:

<script lang="ts">
	import { createForm, getValue } from 'felte';
	import { validator } from '@felte/validator-zod';
	import { schema} from '$lib/validation/sign-up-schema';

	const { form, errors, unsetField, validate } = createForm({
		extend: [validator({ schema })],
		onSubmit: (v, { form }) => {
                        validate()
			form?.submit();
		}
	});

        unsetField("email")
	unsetField("password")
	unsetField("passwordConfirm")
</script>

{#each Object.entries($errors) as [label, message]}
		{#if message}
			<div class="">
				<div class="">
					<h5 class="">Error: {label} is invalid</h5>
					<p>{message}</p>
				</div>
			</div>
		{/if}
{/each}

<form use:form>
        /.../
           </form>

I hope this is not a duplicate, Thanks in advance.

[stefanosandes]

@pablo-abc This feature is important to prevent this behavior:

CleanShot.2023-11-18.at.10.32.24.mp4

[bartoszkrawczyk2]

This would be very useful. Is there a way to implement it? @m0nm @stefanosandes have you found the solution?

[andelkocvjetkovic]

Hello, useForm has the mode prop which does this, maybe it can be added here to.

https://react-hook-form.com/docs/useform#mode

[ivanafanasyeu]

Love it, a big plus from myself:
I think this is related:
#129
#129
#289