Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/logaretm/vue-use-form
✅ A Vue.js composition API function to validate forms
https://github.com/logaretm/vue-use-form
form form-validation forms validation validation-library vee-validate vue vue-composition-api vuejs
Last synced: 19 days ago
JSON representation
✅ A Vue.js composition API function to validate forms
- Host: GitHub
- URL: https://github.com/logaretm/vue-use-form
- Owner: logaretm
- License: mit
- Archived: true
- Created: 2019-08-23T21:00:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-19T23:54:21.000Z (over 4 years ago)
- Last Synced: 2024-08-01T03:14:23.968Z (4 months ago)
- Topics: form, form-validation, forms, validation, validation-library, vee-validate, vue, vue-composition-api, vuejs
- Language: TypeScript
- Homepage:
- Size: 615 KB
- Stars: 97
- Watchers: 5
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-use-form
**⚠ Deprecated. ⚠**
This project will be continued in the future releases of vee-validate starting with `vee-validate@4` which will come with Vue.js 3 support.
---
This is a [Vue composition API](https://github.com/vuejs/composition-api) function that allows you to do form validation, powered by vee-validate.
## Install
**⚠ Not production ready yet. ⚠**
```sh
yarn add vue-use-form
# OR
npm i vue-use-form
```
## Usage
In your component file:
```js
import { ref } from '@vue/composition-api';
import { useForm, useField } from 'vue-use-form';
export default {
setup() {
const fname = ref('');
const { form, submit } = useForm({
onSubmit () {
console.log('Submitting!', {
fname: fname.value
});
}
});
const { errors } = useField('firstName', {
rules: 'required',
value: fname,
form
});
return { fname, errors, submit };
}
};
```
In your Template:
```vue
{{ errors[0] }}
Submit
```
## API
### useForm(object)
The `useForm` function accepts options to configure the form.
```js
const { form, submit } = useForm({
onSubmit () {
// this will only run when the form is valid.
// send to server!
}
});
```
It returns an object containing two properties:
- `form`: A form controller object, which can be used with `useField` to associate fields in the same form.
- `submit`: A safe form submit handler to bind to your submission handler, it will validate all the fields before it runs the given `onSubmit` handler.
### useField(string, string | object)
The `useField` function accepts a `string` which is the input name, and options to configure the field:
```js
const field = useField('firstName', {
rules: 'required', // vee-validate style rules, can be a Ref.
value: fname, // the initial field value, optional.
form // a form controller object returned from "useForm", used to group fields. optional.
});
```
It returns the following members:
| Prop | Type | Description |
| -------- | ---------------------- | -------------------------------------------------------------------------------------- |
| flags | `ValidationFlags` | Object containing vee-validate flags for that field. |
| errors | `string[]` | list of validation errors |
| validate | `() => ValidationResult` | Triggers validation for the field. |
| reset | `() => void` | Resets validation state for the field. |
| onInput | `() => void` | Updates some flags when the user inputs, you should bind it to the element. |
| onBlur | `() => void` | Updates some flags when the user focuses the field, you should bind it to the element. |
| value | `Ref` | A default ref in-case you didn't pass the initial value |
## Credits
- API Inspired by some react libraries: [Formik](https://jaredpalmer.com/formik/), [react-final-form-hooks](https://github.com/final-form/react-final-form-hooks).
- Powered by [vee-validate](https://github.com/baianat/vee-validate).
## License
MIT