⚠ 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 function that allows you to do form validation, powered by vee-validate.
⚠ Not production ready yet. ⚠
yarn add vue-use-form
# OR
npm i vue-use-formIn your component file:
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:
<form @submit.prevent="submit">
<input v-model="fname">
<span>{{ errors[0] }}</span>
<button>Submit</button>
</form>The useForm 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.
The useField function accepts a string which is the input name, and options to configure the field:
const field = 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 by vee-validate.
MIT