Popularity
7.6
Growing
Activity
9.3
Growing
8,730
122
1,052

Description

vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported. Many rules are available out of the box.

This plugin is inspired by PHP Framework Laravel's validation.

Monthly Downloads: 0
Programming language: TypeScript
License: MIT License
Tags: Validation     Validate     vue     Vue.js    
Latest version: v4.5.4

vee-validate alternatives and similar libraries

Based on the "Validation" category.
Alternatively, view vee-validate alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of vee-validate or a related project?

Add another 'Validation' Library

README

CodeCoverage CircleCI CDNJS npm downloads npm version Bundle size Average time to resolve an issue Percentage of issues still open

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions.

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 [email protected]

# Install with npm
npm install [email protected] --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.

Declarative Components

Higher-order components are better suited for most of your cases. Register the Field and Form components and create a simple required validator:

import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

Then use the Form and Field components to render your form:

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

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

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

Composition API

If you want more fine grained control, you can use useField function to compose validation logic into your component:

import { useField } from 'vee-validate';

export default {
  setup() {
    // Validator function
    const isRequired = value => (value ? true : 'This field is required');
    const { value, errorMessage } = useField('field', isRequired);

    return {
      value,
      errorMessage,
    };
  },
};

Then in your template, use v-model to bind the value to your input and display the errors using errorMessage:

<input name="field" v-model="value" />
<span>{{ errorMessage }}</span>

๐Ÿ“š Documentation

Read the documentation and demos.

Sponsorship

You can help this this project by donating one time or by sponsoring via the following link

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.


*Note that all licence references and agreements mentioned in the vee-validate README section above are relevant to that project's source code only.