enyo / use-vest

use-vest

If you want to use Vest and Svelte, this library is for you!
But if you're using SvelteKit, I recommend to use SuperForms.

This library provides a Svelte action for Vest, that makes it easy to validate forms and show errors when necessary — built with TypeScript.

Vest, in their own words is a "Declarative validations framework inspired by unit testing libraries". I recommend checking out the vest documentation to learn how to write validations.

This svelte action is a thin layer for vest to integrate nicely with Svelte. It aims to make it easy to use vest in your svelte forms to validate your data and show errors. It will also wrap your call that submits the data to your server and handle any errors that might happen there as well.

See it in action in this Svelte REPL or look at the example in the example.

Installation

npm install --save-prod use-vest
# or pnpmpnp
pnpm add use-vest
# or whatever package manager you like

Core concept

In the component that contains your form, you invoke useVest which will create a Svelte context that child input fields can use to update values and display validation status.

The useVest call also returns a few objects, most notably:

• an action that should be used on your form like this: <form use:action>. This will take care of handling your submit event, and prevent submission if the validation fails.
• a disabled svelte store, that you can use to disable your form and fields (this takes into account whether your form is valid or submitting).
• an error store that might contain any error that happened during submission.

To learn about individual input field errors and validation, read the Usage section.

Usage

Let's assume you have finished writing your suite and have exported the TypeScript type for your FormData (optional).

To see how you would incorporate use-vest in your form, look at the Form.svelte file.

NOTE: Instead of posting all code snippets directly in this README, I decided to use an example/ directory and link to it. This way the example can be type checked, and is actually the source for the unit tests so there is no risk of the documentation being outdated.

As you can see, useVest returns a few stores that hold information about the current state of your form.

But how do the individual input fields get their validation status?

useVest sets up a Svelte context (that is accessible to all children) where everything necessary to display the input field state is stored.

Any input field inside the form simply uses getVestContext() to get the correct context object, and this object will contain the validation result, as well as information about the form in general.

To see how you can use that context, look at Input.svelte and InputError.svelte.