# svelte-better-form

> A form management library for Svelte that is very lightweight and simple!

Latest version **1.0.8** (published 2022-01-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install svelte-better-form
pnpm add svelte-better-form
yarn add svelte-better-form
bun add svelte-better-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-01-01 |
| First published | 2021-12-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ragokan |
| Maintainers | rago |
| Keywords | svelte, state, management |

## Links

- npm: https://www.npmjs.com/package/svelte-better-form
- Repository: https://github.com/ragokan/svelte-better-form
- Homepage: https://github.com/ragokan/svelte-better-form#readme
- Issues: https://github.com/ragokan/svelte-better-form/issues
- npm.io page: https://npm.io/package/svelte-better-form

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.8 (latest) — 2022-01-01
- 1.0.7 — 2021-12-29
- 1.0.6 — 2021-12-29
- 1.0.5 — 2021-12-29
- 1.0.4 — 2021-12-28
- 1.0.3 — 2021-12-28
- 1.0.2 — 2021-12-28
- 1.0.1 — 2021-12-24
- 1.0.0 — 2021-12-14

## README

# svelte-better-form

## A form management library for Svelte that is very lightweight and simple!;

[![npm](https://img.shields.io/npm/v/svelte-better-form?color=F53B02)](https://www.npmjs.com/package/svelte-better-form)
[![GitHub Repo stars](https://img.shields.io/github/stars/ragokan/svelte-better-form?label=github%20stars)](https://github.com/ragokan/svelte-better-form)

### Why svelte-better-form?

- Very easy, fast, lightweight and powerful!
- Has validation already!

### Create form

```ts
// Simplest
const { values } = betterForm({ name: "better" });

// Full example!
const { values, loading, errors, submit, getValue, setValue } = betterForm(
  {
    name: "",
    email: "",
    age: null,
  },
  {
    validators: {
      name: [
        requiredValidator("Name is required!"),
        minLengthValidator(8, "Name should be longer than 8!"),
      ],
      email: emailValidator("Must be email!"),
      age: (value) => {
        // you can validate [age] here manually.
        if (value < 10) {
          // return a string if it is invalid.
          return "Your age must be older than 10";
        }
      },
    },
    onSubmit: async () => {
      // When you call submit, this one will be executed if the form is valid.
    },
  }
);
```

### Use Form

```html
<!-- Bind value -->
<input type="text" bind:value="{$values.name}" />

<!-- Use errors  -->
{#if $errors.name}
<p>Error: {$errors.name}</p>
{/if}

<!-- Use loading -->
<button disabled="{$loading}" class="button" on:click="{submit}">Submit</button>
```

Thats all!

### The default validators

- minLengthValidator(minLength, errorMessage)
- maxLengthValidator(maxLength, errorMessage)
- requiredValidator(errorMessage)
- emailValidator(errorMessage)

### Custom Validator

```ts
parameterName: (value) => {
  if(value !== "whatYouWant"){
    return "error text"
  }
 },
```

---
_Source: https://npm.io/package/svelte-better-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._