Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evilkiwi/form
Vue 3 Form Handling and Validation
https://github.com/evilkiwi/form
form form-validation forms hook validation vue
Last synced: 24 days ago
JSON representation
Vue 3 Form Handling and Validation
- Host: GitHub
- URL: https://github.com/evilkiwi/form
- Owner: evilkiwi
- License: gpl-3.0
- Created: 2021-07-28T12:10:11.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-11T09:04:24.000Z (about 1 year ago)
- Last Synced: 2024-12-15T06:32:54.048Z (about 1 month ago)
- Topics: form, form-validation, forms, hook, validation, vue
- Language: TypeScript
- Homepage: https://evil.kiwi
- Size: 1010 KB
- Stars: 24
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue-3 - @casthub/form - Vue 3 Form Handling & Validation hook (Packages)
README
Form Handling and Validation Hook for Vue 3
`@evilkiwi/form` provides Vue 3 Hooks for consuming, validating and managing Forms.
Inspired by [vue-hooks-form](https://github.com/beizhedenglong/vue-hooks-form).
- Asynchronous validation via [async-validator](https://github.com/yiminghe/async-validator)
- No forced HTML structure/format
- Error handling
- TypeScript
## Installation
This package is available via NPM:
```bash
yarn add @evilkiwi/form
# or
npm install @evilkiwi/form
```
## Usage
A simple example app is provided in the [examples/simple](https://github.com/evilkiwi/form/tree/master/examples/simple) folder.
```vue
Email Address
{{ email.error.message }}
Password
{{ password.error.message }}
Login
import { useForm } from '@evilkiwi/form';
const { useField, handle, loading } = useForm<{
email: string;
password: string;
}>({
defaults: {
email: '[email protected]',
},
});
const email = useField('email', {
type: 'email',
required: true,
});
const password = useField('password', {
required: true,
});
const submit = handle(async ({ email, password }) => {
alert(`Email: ${email} Password: ${password}`);
});
```
## API
### `useForm`
#### Options
| **Option** | **Default** | **Type** | **Description** |
| -------------- | ----------- | --------------------- | ---------------------------------------------------------------------------------------- |
| defaults | `{}` | `Record` | Optionally provide defaults for the various fields in this object by key -> value pairs. |
| validationMode | `submit` | `'change'\|'submit'` | NOT IMPLEMENTED YET. Whether to validate input once submitted |
#### Response
| **Option** | **Type** | **Description** |
| ------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `useField` | `Field` | [Documented below.](#usefield) |
| `handle` | `(run: values => Promise) => async (e?: Event) => Promise` | Registers the asynchronous handler that runs once a form is submitted and successfully validated. |
| `reset` | `() => void` | Reset the Form to tis default state. |
| `validate` | `() => Promise` | Manually trigger validation and error handling. |
| `clearErrors` | `() => void` | Clear all errors for all fields. |
| `loading` | `Ref` | Whether the form is currently executing. |
| `destroy` | `() => void` | Destroy and clean-up the Form handler. Happens automatically during `onBeforeUnmount`. |
### `useField`
#### Options
Currently the options object provided to `useField` is inheritted from [async-validator](https://github.com/yiminghe/async-validator) and
all options are forwarded as a validation field.
#### Response
| **Option** | **Type** | **Description** |
| ------------ | ------------------------------ | ------------------------------------------------------------------ |
| `errors` | `ValidateError[]` | An array of all Errors set against this Field. |
| `error` | `ValidateError\|null` | Optimistically picks one, if any, of the Errors against the field. |
| `hasError` | `ComputedRef` | Whether or not the Field has 1 or more errors. |
| `setError` | `(text: string) => void` | Manually set the error on this field. |
| `clearError` | `() => void` | Clears all Errors currently set against this Field. |
| `value` | `WritableComputedRef` | The value for the field, compatible with `v-model`. |
## To-do
- Add a test suite