svelte-smart-forms

A form form library for svelte that abstracts the boilerplate needed by other libraries. Specifically, it lets you perform robust client-side validation without having to write a separate validation schema.

Disclaimer This library is very much still under construction. Use at your own peril

How it works

The function createFormState will generate a store which holds all required form state (validity, errors, dirtyness etc) and is passed to all other SmartForm elements. These elements will add automatically update the form

Basic Usage

  import { createFormState, FieldErrors, Form, PasswordInput, TextInput } from '@gnippots/svelte-smart-forms';
  const formState = createFormState();

  const form: {
    email?: string;
    password?: string;
    password2?: string;
  } = {};

  let submit = () => {
    console.log('submitted');
  }

  <Form formState={formState} onSubmit={submit}>
    <TextInput
      name='email'
      label='Email'
      bind:value={form.email}
      required={true}
      formState={formState}>
    </TextInput>

    <PasswordInput 
      name='password'
      label='Password'
      bind:value={form.password} 
      required={true} 
      formState={formState}>
    </PasswordInput>
    
    <PasswordInput 
      name='password2'
      label='Confirm Password'
      confirm_against={form.password}
      bind:value={form.password2} 
      required={true} 
      formState={formState}>
    </PasswordInput>

    <button>Submit</button>
  </Form>

Styling

The form elements are not styled by default, but have classses that can be globally styled. See /static/styles.css for an example

You can also use the classes property to pass a custom class which will be applied to a wrapper around the form element.

A future update will allow better provision of styles and allow you to pass custom components to each form element.

Custom Validation

To be documented

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.

Building

To build your library:

npm run package

To create a production version of your showcase app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

Go into the package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).

To publish your library to npm:

npm publish