# @slimkit-ui/svelte-forms

> Zero dependency Svelte form validation library

Latest version **1.1.7** (published 2022-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @slimkit-ui/svelte-forms
pnpm add @slimkit-ui/svelte-forms
yarn add @slimkit-ui/svelte-forms
bun add @slimkit-ui/svelte-forms
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2022-05-26 |
| First published | 2021-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thilanka N. Liyanaarachchi |
| Maintainers | zirconlabz |
| Keywords | svelte, form, validation |

## Links

- npm: https://www.npmjs.com/package/@slimkit-ui/svelte-forms
- npm.io page: https://npm.io/package/@slimkit-ui/svelte-forms

## 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

- 1.1.7 (latest) — 2022-05-26
- 1.1.6 — 2022-03-15
- 1.1.5 — 2022-01-20
- 1.1.0 — 2021-03-14
- 1.0.2 — 2021-03-08

## README

# Svelte Forms

Svelte Forms is a lightweight zero dependency libray for handling forms in svelte. 

## Usage

```sh
npm i "@slimkit-ui/svelte-forms"
```

```javascript
import { Form, formValidity, validation } from "@slimkit-ui/svelte-forms";

myForm = new Form('customerForm', {
    name: { value: "Thilanka", validation: {minLength: 5, maxLength: 20}},
    email: { value: '', validation: {email:''} }
})

const submitHandler = () => {
        console.log(myForm.name.value);
        console.log(myForm.email.value);
}
```

```html
<form on:submit|preventDefault={submitHandler} autocomplete="off">
    <label>Full Name: </label>
    <input type="text" use:validation={myForm.name} bind:value={myForm.name.value} />
    {#if myForm.name.showError}
        <p class="help is-danger">Name is invalid</p>
    {/if}

    <label>Email: </label>
    <input type="text" use:validation={myForm.email} bind:value={myForm.email.value} />
    {#if myForm.email.showError}
        <p class="help is-danger">Email is invalid</p>
    {/if}

    <button type="submit"
        disabled={!$formValidity[myForm.formId].isValid}>Submit</button>
</form>
```

### Development

Want to contribute? Great!

Buzz me here thilanka.nuwan89@gmail.com

License
----

MIT


**Free Software, Hell Yeah!**

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