vee-validate README

The project's README from github.com/logaretm/vee-validate. As one markdown file: README.md.

Painless Vue forms



Features

Getting Started

Installation

# Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

vue Version vee-validate version Documentation Link
2.x 2.x or 3.x v2 or v3
3.x 4.x or 5.x v4 or v5

Usage

vee-validate offers two styles to integrate form validation into your Vue.js apps.

Composition API

The fastest way to create a form and manage its validation, behavior, and values is with the composition API.

Create your form with useForm and then use defineField to create your field model and props/attributes and handleSubmit to use the values and send them to an API.

<script setup>
import { useForm } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Create the form
const { defineField, handleSubmit, errors } = useForm({
  validationSchema: {
    field: required,
  },
});

// Define fields
const [field, fieldProps] = defineField('field');

// Submit handler
const onSubmit = handleSubmit(values => {
  // Submit to API
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>

You can do so much more than this, for more info check the composition API documentation.

Declarative Components

Higher-order components can also be used to build forms. Register the Field and Form components and create a simple required validator:

<script setup>
import { Field, Form } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Submit handler
function onSubmit(values) {
  // Submit to API
  console.log(values);
}
</script>

<template>
  <Form v-slot="{ errors }" @submit="onSubmit">
    <Field name="field" :rules="required" />

    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </Form>
</template>

The Field component renders an input of type text by default but you can control that

📚 Documentation

Read the documentation and demos.

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

Credits

Emeriti

Here we honor past contributors and sponsors who have been a major part on this project.

⚖️ License

Released under MIT by @logaretm.

vee-validate (logaretm/vee-validate)

vue2
Searching Database…

11.3K ·GitHub
Vee-validate
What is this?vee-validate is a validation library for Vue.js forms that provides declarative, template-based validation for fields and forms.
Is it a framework or a library?It is a library you install into an existing Vue.js project, offering both a Composition API and declarative components for form validation.
How do I add it to a project?Install the package, then either use the Composition API with useForm/defineField/handleSubmit, or register the Field and Form components to build forms declaratively.
Which Vue version do I need?The main v4/v5 version only supports Vue 3.x; for Vue 2.x you need to use vee-validate v2 or v3 instead.
Is it tied to a specific UI library?No, it's UI agnostic and works with native HTML elements or any UI component library you choose, since it only handles validation logic.
Does it support built-in validation rules out of the box?Yes, there is a companion rules library with over 25 built-in rules covering most common web application validation needs.
Does it support multiple languages for error messages?Yes, it ships with 45+ locales for the built-in rules contributed by developers worldwide.
Can validation be asynchronous or run only on specific fields?Yes, validation can be synchronous or asynchronous and can be applied at the field level or the whole form level.
What inspired the design of vee-validate?Its validation syntax was inspired by Laravel validation, the v4 API by Formik, and nested path typing by react-hook-form.
What are similar projects?formily, validator.js, redux-form, cleave.js, vuestic-admin, vue-admin-better, react-jsonschema-form, jquery-validation
Which topics is it in?form-validation, validations, validator, form, vue2, forms, validation, vuejs, vue3, i18n, vue, hacktoberfest
Creator
logaretm
Size
23 MB
Stars
11.3K
Updated
CommitMar 04Releasev4.15.1Jun 07
Age
10y
Commits · 90 Days