svelte-well-formed

Another form library for Svelte, svelte-well-formed aims to create forms that are accessible and customisable, while also catering for common requirements like validation.

Installation

As usual, for a Svelte project:

npm install --save-dev svelte-well-formed

Usage

Import the form component:

import Form from 'svelte-well-formed';

Configure some fields and define a submit handler:

const fields = [
    {
        name: 'username',
        label: 'Username',
    },
    {
        name: 'password',
        label: 'Password',
    },
];

const handleSubmit = async values => {
    // Do something asynchronously here.
    // Or just log values.
    console.log('Username:', values.username);
    console.log('Password:', values.password);
};

Enjoy!

Client-side validation

Client-side validators can be added to fields under the validators property. The validator must be a function with signature

(value: string) => [<value is true: boolean>, <error message: string>]

If valid errorMessage will be ignored; if !valid && !errorMessage, then a default error message will be substituted.

const myValidator = value => [value.length >= 8, 'Password is too short.'];
const fields = [
    {
        name: 'password',
        label: 'Password',
        validators: [myValidator],
    },
    // ...
];

Alternatively, you can use one of the built-in validators included with this module:

import {isRequired, isValidPassword} from 'svelte-well-formed/lib/validators';

field.validators = [isRequired, isValidPassword];

See ./lib/validators.js for more available validators.

Server-side validation

Of course, client-side validation is only half of the problem. Most of the time we also need to validate on the server. You can indicate the success or failure of a form submission with the return value (or returned promise's resolved value) of the on:submit handler.

If everything succeeded, the submit handler needn't return anything:

const onSubmit = values => undefined;

To indicate that field-specific errors were encountered:

const onSubmit = async values => {
    // ... do stuff ...
    return {
        errors: {
            username: 'A user with that username already exists.',
        },
    };
};

Errors which are not field-specific can be used as well/instead, using the formError property:

const onSubmit = async values => {
    // ... do stuff ...
    return {
        errors: {
            // ...
        },
        formError: 'There was a problem processing your request.',
    };
};

Finally, if your submit handler throws an error or returns a promise which rejects, the form will act as if you returned a generic formError:

const onSubmit = values => {
    throw new Error('Uh oh!');
};

We don't recommend (intentionally) using this final approach; it's merely there to protect your UI from an unexpected failure.