Make validate function optional; Cannot read property 'then' of undefined at updateValidateField about svelte-forms-lib HOT 10 CLOSED

@TylerRick you're spreading formProps onto your <form >, but formProps doesn't return onSubmit - it returns handleSubmit, and that should be supplied to the form via the on:submit DOM event handler:

<script>
  const {handleSubmit} = createForm({
    onSubmit: (values) => // do something with values,
  });
</script>

<form on:submit|preventDefault={handleSubmit}>
...

EDIT: my bad, I see you're using the Form component, not the native DOM form - ignore this comment :P

from svelte-forms-lib.

Possibly the example just needs to be updated/fixed...

from svelte-forms-lib.

Looks like createForm requires a validate function to be passed in.

Adding:

    validate: values => true

makes the error go away...

So I guess the docs just need to be updated to include that.

But better yet, maybe validate should be made to be optional? You shouldn't need a validate function if you don't want to validate anything.

from svelte-forms-lib.

Well, I can't reproduce in CodeSandbox, so it must have been a problem on my end. Closing for now.

from svelte-forms-lib.

I take that back. I did just run into it using the CodeSandbox template, so it's not just a problem with my code. But it's only intermittent. When I reload that sandbox, it doesn't give any error when I submit now.

But I did just run into it in a different Sandbox that's just as simple or simpler:

Why does it do this?

from svelte-forms-lib.

Yeah, I've seen the error intermittently with both Form component and using createForm — using examples straight from the docs. Strange.

from svelte-forms-lib.

Not super urgent since I'm not running into it anymore in my actual app, but just something to keep an eye out for...

from svelte-forms-lib.

This is happening because the return type of validateFieldValue is Promise | undefined, and updateValidateField assumes the return type is Promise: Here's the issue:

  function validateFieldValue(field, value) {
    updateTouched(field, true);
    if (validationSchema) {
      isValidating.set(true);
      return util.reach(validationSchema, field).validate(value).then(() => util.update(errors, field, "")).catch(error => util.update(errors, field, error.message)).finally(() => {
        isValidating.set(false);
      });
    }

    if (validateFn) {
      isValidating.set(true);
      return Promise.resolve().then(() => validateFn({
        [field]: value
      })).then(errs => util.update(errors, field, ! util.isNullish(errs) ? errs[field] : "")).finally(() => {
        isValidating.set(false);
      });
    }

	// => not handling !validationSchema && !validateFn
  }

from svelte-forms-lib.

Thanks for reporting, @TylerRick, PR here at #55. Will get this merged once we have a review.

from svelte-forms-lib.

🎉 This issue has been resolved in version 1.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from svelte-forms-lib.