https://github.com/zackify/svelte-validify
Flexible and simple form abstraction in Svelte
https://github.com/zackify/svelte-validify
Last synced: 11 months ago
JSON representation
Flexible and simple form abstraction in Svelte
- Host: GitHub
- URL: https://github.com/zackify/svelte-validify
- Owner: zackify
- Created: 2021-03-15T21:16:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T21:41:32.000Z (almost 5 years ago)
- Last Synced: 2025-02-14T04:49:48.612Z (about 1 year ago)
- Language: JavaScript
- Size: 56.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Validify
An attempt to bring [react-validify](https://github.com/zackify/validify) over to Svelte.
The goal with this library is to be the most flexible form library while also having the smallest API.
Todo: Test coverage
## Get started
- Install it
- Make a custom Input component
- The end
## Install
```
npm install svelte-validify
```
## Making an Input Component
Your input component must implement `handleChange` `handleBlur` `errors` and `value` to function properly.
Once you add these methods to your component, form validation will be taken care of for you.
When a user has an invalid field, the error will not be shown until blurring the field, or someone submits the form.
After this happens, validation runs onChange for the best UX possible.
```svelte
import { useField } from "svelte-validify";
import type { RuleFn } from "svelte-validify";
export let name: string;
export let rules: RuleFn[] = [];
let field = useField({ name, rules });
{#if $field.errors.length}
{$field.errors[0]}
{/if}
$field.handleChange(e.currentTarget.value)}
/>
```
## Using a Form
Import the Form component, and createForm method from the library.
Initialize the form with a few values if you'd like.
Render inputs, and set custom rules. You can see this in action by running the example folder :)
```svelte
import { Form, createForm } from "svelte-validify";
import Input from "./Input.svelte";
// Always create a form, and add some optional values
let form = createForm({ name: "Bob", email: "test" });
// Rules run at the correct times, on blur, or onChange after initial blur / submit
// you don't have to think about it!
let isRequired = (value) => (!value ? "Field is required" : "");
console.log($form.values)}>
Hello!
```