# tsurih

> Svelte form validation library

Latest version **3.0.6** (published 2024-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install tsurih
pnpm add tsurih
yarn add tsurih
bun add tsurih
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.6 |
| Published | 2024-04-15 |
| First published | 2023-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vladislav Yemelyanov |
| Maintainers | hardwayder |
| Keywords | tsurih, svelte, form, validation, validate, sveltekit, typescript, ts |

## Links

- npm: https://www.npmjs.com/package/tsurih
- npm.io page: https://npm.io/package/tsurih

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.6 (latest) — 2024-04-15
- 3.0.5 — 2024-01-15
- 3.0.4 — 2024-01-15
- 3.0.3 — 2024-01-15
- 3.0.2 — 2023-08-27
- 3.0.1 — 2023-08-20
- 3.0.0 — 2023-08-20
- 2.0.16 — 2023-08-12
- 2.0.15 — 2023-08-10
- 2.0.14 — 2023-08-10
- 2.0.13 — 2023-08-10
- 2.0.12 — 2023-08-08
- 2.0.11 — 2023-08-08
- 2.0.10 — 2023-08-07
- 2.0.9 — 2023-07-31
- … 46 more at https://npm.io/package/tsurih/versions

## README

# Tsurih

Svelte form validation library

- Minimalistic 🚐
- Type safe 🛟
- Small size 📦
- Ability to use custom validators ☘️
- Strategies 🎖️
- Helper functions 💪
- Focused on DX ❤️

Example 👇

```jsx
<script lang="ts">
  import { get } from "svelte/store";
  import { tsurih, debounce, validators } from "tsurih";
  import type { TConfig, TContext } from "tsurih";

  const debounced = debounce(() => {
    return new Promise<boolean>((res) =>
      setTimeout(() => {
        console.log("🚂");
        res(true);
      })
    );
  }, 2000);

  const customValidators = {
    debounce: (message?: string) => {
      return async (ctx: TContext<any, any, TConfig<any, any>>) => {
        const result = await debounced();

        const values = get(ctx.config.values);

        if (!result) {
          // ❌ Error
          return message || "Field is not valid";
        }

        // ✅ Success
        return "";
      };
    },
  };

  const form = tsurih({
      field1: true,
      field2: "",
    })
  .setSchema({
    field1: [validators.required()],
    field2: [
      validators.required(),
      (ctx) => {
        const values = get(ctx.config.values);

        if (!values.field1) {
          // ❌ Error
          return "Field is not valid";
        }

        // ✅ Success
        return "";
      },
      customValidators.debounce(),
    ],
  })
  .setStrategy("blur");

  $: watchOnlyField1 = $values.field1;

  $: {
    watchOnlyField1;
    form.revalidate("field2");
  }

  const { errors, isSubmitting, values } = form;
</script>

<form
  use:form.reg
  on:submit="{form.onSubmit((values) => {
    console.log(values);
  })}"
>
  <input
    type="checkbox"
    bind:checked="{$values.field1}"
    name="{form.fields.field1}"
  />

  {#if $errors.field1}
    <span>{$errors.field1}</span>
  {/if}

  <input bind:value="{$values.field2}" name="{form.fields.field2}" />

  {#if $errors.field2}
    <span>{$errors.field2}</span>
  {/if}

  {#if $isSubmitting}
    Submitting...
  {/if}

  <button type="submit">Submit</button>
</form>
```

☘️ tsurih also provides validators, isString, isNumber, isArray, isObject, debounce utilities

☘️ "validators" utility which has standard min, max, required, regexp, optionalMin, optionalRegexp.

☘️ An additional validator "optional" is not needed as all default fields are optional. But if you, for example, want min or regexp to be checked only if a value is present, use optionMin or optionalRegexp . If you are writing your own validator which should be optional, then it should have an if(!ctx.value) return "" condition

## Author

[Vladislav Yemelyanov](https://twitter.com/@hardwayder)

Released under the MIT License.

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