sveltekit-iots-forms

Helper lib for validating (form) data in SvelteKit

Pre-requisites

npm install io-ts

Example

Models

First, create your models. This is an example from the io-ts docs. Check out the io-ts docs for more info.

import * as T from 'io-ts';
import { PathReporter } from 'io-ts/PathReporter';

// This is an example from the io-ts docs.
interface PositiveBrand {
    readonly Positive: unique symbol;
}

const Positive = t.brand(
    t.number, // a codec representing the type to be refined
    (n): n is t.Branded<number, PositiveBrand> => 0 < n, // a custom type guard using the build-in helper `Branded`
    'Positive' // the name must match the readonly field in the brand
);
type Positive = t.TypeOf<typeof Positive>;
const SomeInputCodec = T.type({
    delay: Positive
});
type SomeInput = T.TypeOf<typeof SomeInputCodec>;

Validation

In short, all you need to do is to pass whatever it is you need validated, along with the Codec to the validateForm function.

import { fail } from '@sveltejs/kit';
import { validateForm } from '$lib/server';
import SomeInputCodec from '$lib/models/some-input';

const result = validateForm(SomeInputCodec)(event);
//        ^-- result is of type Either<Errors, SomeInput>
if (result._tag === 'Left') return fail(400);

// due to the type guard above, result.right is of type SomeInput
console.log(result.right.delay);

Longer validation example

WIP

First, include the parsed form data in the event.locals object. sk-form-data does this for you, but you need to include it in the hooks.

// src/hooks.server.ts
import { sequence } from '@sveltejs/kit/hooks';
import { form_data } from 'sk-form-data';

export const handle = sequence(form_data);

Then, make your form markup. Check the naming conventions used by parse-form-data to see how to name your inputs. For numbers, prefix it with a + sign.

<form method="POST" use:enhance>
    <label for="delay">Delay</label> <input type="number" name="+delay" />ms
    <button>Submit</button>
</form>

// src/routes/+page.server.ts
import { validateForm } from '$lib/server';
import type { Actions, PageServerLoad } from './$types';
import { fail } from '@sveltejs/kit';

export const actions = {
    default: async (event) => {
        const result = validateForm(SomeInputCodec)(event);
        // alternatively, if you're not using the `form_data` hook provided by `sk-form-data`
        // const result = validateForm(SomeInputCodec)(event.locals.form_data);

        if (result._tag === 'Left') {
            const errors = PathReporter.report(result);
            return fail(400, { errors });
        }

        // result.right is of type SomeInput
        // by this point, `delay` is guaranteed to
        // 1. exist, thanks to the other helper libs
        // 2. be a positive number, thanks to io-ts
        return { delay: result.right.delay };
    }
} satisfies Actions;