https://github.com/wetix/svelte-reactive-form

A better version of svelte form validation.
https://github.com/wetix/svelte-reactive-form

form form-validation reactive-form svelte-form svelte3 typescript validation

Last synced: 3 months ago
JSON representation

A better version of svelte form validation.

• Host: GitHub
• URL: https://github.com/wetix/svelte-reactive-form
• Owner: wetix
• License: mit
• Created: 2020-11-23T06:37:06.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-03-05T08:34:49.000Z (10 months ago)
• Last Synced: 2024-09-29T12:06:28.997Z (3 months ago)
• Topics: form, form-validation, reactive-form, svelte-form, svelte3, typescript, validation
• Language: TypeScript
• Homepage:
• Size: 234 KB
• Stars: 11
• Watchers: 3
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Reactive Form

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



[![Svelte v3](https://img.shields.io/badge/svelte-v3-orange.svg)](https://svelte.dev)

[![npm](https://img.shields.io/npm/v/svelte-reactive-form.svg)](https://www.npmjs.com/package/svelte-reactive-form)

[![Build Status](https://github.com/wetix/svelte-reactive-form/workflows/ci/badge.svg?branch=master)](https://github.com/wetix/svelte-reactive-form)

[![download](https://img.shields.io/npm/dw/svelte-reactive-form.svg)](https://www.npmjs.com/package/svelte-reactive-form)

[![Bundle Size](https://badgen.net/bundlephobia/minzip/svelte-reactive-form)](https://bundlephobia.com/result?p=svelte-reactive-form)

[![LICENCE](https://img.shields.io/github/license/wetix/svelte-reactive-form)](https://github.com/wetix/svelte-reactive-form/blob/master/LICENSE)

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



## Installation and Usage

```console

npm install svelte-reactive-form

```

or

```console

yarn add svelte-reactive-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

  import { useForm, Field, defineRule } from "svelte-reactive-form";

  import { required, minLength } from "@svelte-reactive-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);

  });

  

    

    {#each errors as item}

        
{item}

    {/each}

  

  

   setValue("pin", e.target.value)} />

  

  

  

    {#if $form$.submitting}Submit{:else}Submiting...{/if}

  


```

## API

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

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

## Sponsors



## License

[svelve-reactive-form](https://github.com/wetix/svelte-reactive-form) is 100% free and open-source, under the [MIT license](https://github.com/wetix/svelte-reactive-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/).