svelte-forms icon indicating copy to clipboard operation
svelte-forms copied to clipboard

[BUG] First example in the documentation does not work

Open alexspurling opened this issue 3 years ago • 3 comments

In the first example in the documentation of a simple form, the input field is considered to be valid on first load even though no value exists in the field.

I have slightly adapted the first example to demonstrate the problem:

https://svelte.dev/repl/7aca3afc2c374c7e9c143e773fbdc0ef?version=3.53.1

I would expect the form to show "Form valid: false". Instead it says "Form valid: true"

Screenshot from 2022-11-18 10-17-35

I am using version 2.3.1 of svelte-forms.

alexspurling avatar Nov 18 '22 10:11 alexspurling

It seems that validation is only triggered when all fields are dirty.

Unfortunately, that's too late and you could submit an invalid form with empty but required fields.

philippone avatar Dec 22 '22 21:12 philippone

Big bug actually. I really don't know how about anyone didn't care about it.

Not a fix, but a good workaround is:

import { onMount } from "svelte";

onMount(() => { myForm.validate() })

This makes the Form work properly.

BrianIto avatar Jan 08 '23 00:01 BrianIto

Add { checkOnInit: true } as the last argument to any of the fields used in the form:

export const name = field('name', '', [required()], {
  checkOnInit: true
})

export const accountForm = form(name)

grischaerbe avatar Jan 17 '23 11:01 grischaerbe