svelte-hook-form/README.md

A better version of form validation.

# Svelte Reactive Form

> A better version of form validation for [Svelte](https://svelte.dev).

<p>

[![Svelte v3](https://img.shields.io/badge/svelte-v3-orange.svg)](https://svelte.dev)
[![npm](https://img.shields.io/npm/v/svelte-hook-form.svg)](https://www.npmjs.com/package/svelte-hook-form)
[![Build Status](https://github.com/si3nloong/svelte-hook-form/workflows/ci/badge.svg?branch=master)](https://github.com/si3nloong/svelte-hook-form)
[![download](https://img.shields.io/npm/dw/svelte-hook-form.svg)](https://www.npmjs.com/package/svelte-hook-form)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/svelte-hook-form)](https://bundlephobia.com/result?p=svelte-hook-form)
[![LICENCE](https://img.shields.io/github/license/si3nloong/svelte-hook-form)](https://github.com/si3nloong/svelte-hook-form/blob/master/LICENSE)

[![NPM Stat](https://nodei.co/npm/svelte-hook-form.png)](https://www.npmjs.com/package/svelte-hook-form)

</p>

## Installation and Usage

```console
npm install svelte-hook-form
```

or

```console
yarn add svelte-hook-form
```

## Features

- Simple
- No extra dependency
- TypeScript as first class citizen
- Custom validation
- Reactive
- Flexible & Configurable

## How to use

[https://svelte.dev/repl/2afb74650f36429fa15871b6998d60c9?version=3.31.0](https://svelte.dev/repl/2afb74650f36429fa15871b6998d60c9?version=3.30.0)

```svelte
<script lang="ts">
  import { useForm, Field, defineRule } from "svelte-hook-form";
  import { required, minLength } from "@svelte-hook-form/rules";

  // define the global validation rules
  defineRule("required", required);
  defineRule("minLength", minLength);
  defineRule("numeric", (val: any) => {
    return /[0-9]+/.test(val) || "invalid numeric format";
  });

  // initialize the form instance
  const form$ = useForm<{ name: string; pin: string; description: string }>();
  const { field, register, setValue, control, onSubmit } = form$;

  // you can register your field manually
  register("pin", {
    defaultValue: "",
    rules: ["required", "minLength:4", "numeric"]
  });

  const submitCallback = onSubmit(
    (data, e) => {
      console.log("Data =>", data);
      console.log("Event =>", e);
    },
    (err, e) => {
      console.log("Error =>", err);
      console.log("Event =>", e);
    }
  );
</script>

<form on:submit={submitCallback}>
  <Field {control} name="name" rules="required" let:errors let:onChange>
    <Component {onChange} />
    {#each errors as item}
      <div>{item}</div>
    {/each}
  </Field>
  <!-- manually handle set value -->
  <input type="text" on:input={(e) => setValue("pin", e.target.value)} />
  <!-- register field using svelte actions -->
  <input name="description" type="text" use:field={{ rules: ["required"] }} />
  <button disabled={!$form$.valid}>
    {#if $form$.submitting}Submit{:else}Submiting...{/if}
  </button>
</form>
```

## API

Check out the [API](https://github.com/si3nloong/svelte-hook-form/blob/master/docs/API.md) documentation.

For advanced usage, you may refer to [Advanced API](https://github.com/si3nloong/svelte-hook-form/blob/master/docs/ADVANCED_USAGE.md).

## License

[svelte-hook-form](https://github.com/si3nloong/svelte-hook-form) is 100% free and open-source, under the [MIT license](https://github.com/si3nloong/svelte-hook-form/blob/master/LICENSE).

## Big Thanks To

Thanks to these awesome companies for their support of Open Source developers ❤

[![GitHub](https://jstools.dev/img/badges/github.svg)](https://github.com/open-source)
[![NPM](https://jstools.dev/img/badges/npm.svg)](https://www.npmjs.com/)

Inspired by [react-hook-form](https://react-hook-form.com/).