- Notifications
You must be signed in to change notification settings - Fork0
✅ A Vue.js composition API function to validate forms
License
logaretm/vue-use-form
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
⚠ Deprecated. ⚠
This project will be continued in the future releases of vee-validate starting withvee-validate@4 which will come with Vue.js 3 support.
This is aVue composition API function that allows you to do form validation, powered by vee-validate.
⚠ Not production ready yet. ⚠
yarn add vue-use-form# ORnpm i vue-use-formIn your component file:
import{ref}from'@vue/composition-api';import{useForm,useField}from'vue-use-form';exportdefault{setup(){constfname=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:
<form @submit.prevent="submit"> <input v-model="fname"> <span>{{ errors[0] }}</span> <button>Submit</button></form>
TheuseForm function accepts options to configure the form.
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 withuseFieldto 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 givenonSubmithandler.
TheuseField function accepts astring which is the input name, and options to configure the field:
constfield=useField('firstName',{rules:'required',// vee-validate style rules, can be a Ref<string>.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<string> | A default ref in-case you didn't pass the initial value |
- API Inspired by some react libraries:Formik,react-final-form-hooks.
- Powered byvee-validate.
MIT
About
✅ A Vue.js composition API function to validate forms
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.