Vee-validate NPM

Features

🍞 Easy: Declarative validation that is familiar and easy to setup
🧘‍♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
⚡️ Fast: Build faster forms faster with intuitive API and small footprint
🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
✅ Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world

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`	v4

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

Inspired by Laravel's validation syntax
v4 API Inspired by Formik's
Nested path types by react-hook-form
Logo by Baianat

Emeriti

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

Baianat.

⚖️ License

Released under MIT by @logaretm.

VueJS Vue validation validator inputs form

@vue/devtools-api type-fest

@pagemaker.io/pagemaker form-schema-gt4w work-schedule-ui nbzify zr-dymnic-form-vue cp-ui-library in-syl @repzio/vue-components aino-vuesax pls-gc liangchuan-ui billingman-web-customer-component mercedesbenzvaluemycar ac-components-dynamic appup-components appup-components-dynamic editor-texto-app @fajarullah/vue-validation-components applauncherfavmenuckuessner2 applauncherfavmenuckuessner3 email-component backstage_vue mercedes-trade tiringo-shared shygon ecinc-cloud-app @glance-project/alice-service-work mybankmobile-testppp quasar-ui-tmt-kit @yiird/gavin-ui-element speckle-admin get-net-widget @yiird/gavin-ui-lib carstack restaurateurapp @cisweb/component-library pegadaian-components @quizbound/quiz-v2 @tangguoxiongbear/baseui @skoda-dms/component-lib hex-3m-ui jb-test-vite-windicss-project weichenyu-test @mernjs/vue-vuex valhalla-ui @3d-print-farm/client @bigpicturemedical/medkit-component-form-item client-test-01 drupal-vuejs first-npm-abdulmlik @frontend-melhor-envio/mui-core crypto-voucher-widget @charnwood-borough/vue-tagsinput @charnwood-borough/vue2-typeahead chuchuro-authvault-vue3 05-ui-kit nx-libs saludtools-ui-library @voormeerwaarde/vue-components-library @sorcecloud/section lib-vue-components lc-apm lemonitor-application npm-test-ah @gits-id/components space.web.scoringfields @infinitebrahmanuniverse/nolb-vee av-theme header_cesi_eat fnst-ui wbu-design-system @everything-registry/sub-chunk-3046 tlsclient-shared-modules ds-tch lekai-ui leki-ui naue-library-frontend jsonforms-vue-primevue @requrv/requrv-vue-ui factory-kit-test manage-layout tb-ds-web-library talebase-ui talent-find sword-vue-ui sword-web-ui swordpaas-ui swordpass-ui syswin-wf-ui taghash-frontend test-nuxt-layer test-p-d widgets-eyantra wmsman-web-component vue-ghost-ui vue-material-rtl vue-laravel vue-laravel-components vue-main-components vue-atomic-design

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

10 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago