Getting Started

To install svelte-formit:

npm install svelte-formit

First we decalre the hook(function) useForm. The hook will return some functions we can use.

register - has the name suggests, it's an action to register our input.
handleSubmit - tells the library what to do when we submit the form.
getValues - get all form values. getValues it's a store, therefore we add the dollar sign beforehand.
We also must add a name attribute to each input we register, and it must be unique.

Basic

<script>
    import { useForm } from "svelte-formit";

    const { handleSubmit, register } = useForm();

    const onSubmit = data => {
        console.log(data);
    };
</script>

<form on:submit={e => handleSubmit(e, onSubmit)}>
    <input use:register name="name" />
    <input use:register type="number" name="age" />
    <button type="submit">Submit</button>
</form>

You could pass register an object to add a validation. The key of each object is the name of the validation, and the value is the validation function.
If the validation doesn't pass, then the form won't submit when you click on the submit button.

Validation

<script>
    import { useForm } from "svelte-formit";

    const { handleSubmit, register } = useForm();

    const onSubmit = data => {
      console.log(data);
    };
</script>

<form on:submit={e => handleSubmit(e, onSubmit)}>
    <input use:register={{required: value => value === "" && "error"}} name="name" />
    <input use:register type="number" name="age" />
    <button type="submit">Submit</button>
</form>

In this example we add validation only for our first input.
We call the validation "required", but we could have called it whatever we want.
And we are checking whether value is empty string and if it is, then we return a string which will be our error message for this validation. For now we don't display the error.

Displaying Error Message

<script>
    import { useForm, FormContext, ErrorMessage } from "svelte-formit";

    const methods = useForm();
    const { handleSubmit, register } = methods;

    const onSubmit = data => {
      console.log(data);
    };
</script>

<FormContext {...methods}>
    <form on:submit={e => handleSubmit(e, onSubmit)}>
      <input use:register={{required: value => value === "" && "error"}} name="name" />
      <ErrorMessage name="name"/>
      <input use:register type="number" name="age" />
      <button type="submit">Submit</button>
    </form>
</FormContext>

First we need to create our form context, by importing it from our library. And then to wrap it around our form, and eventually passing down all our useForm methods using spread. The library provides a basic ErrorMessage component, which will display the error.
All you need to do is to give a name prop of the input you want to display ErrorMessage to.