Tsurih

Svelte form validation library

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

Example 👇

<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

Released under the MIT License.