Need help with vuelidate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vuelidate
5.8K Stars 422 Forks MIT License 314 Commits 117 Opened issues

Description

Simple, lightweight model-based validation for Vue.js

Services available

!
?

Need anything else?

Contributors list

vuelidate

codecov gzip size

Simple, lightweight model-based validation for Vue.js

Sponsors

Gold

Vuejs Amsterdam

Vue - The Road To Enterprise

Silver

Storyblok

Bronze

Vue Mastery logo Vue Mastery logo

Features & characteristics:

  • Model based
  • Decoupled from templates
  • Dependency free, minimalistic library
  • Support for collection validations
  • Support for nested models
  • Contextified validators
  • Easy to use with custom validators (e.g. Moment.js)
  • Support for function composition
  • Validates different data sources: Vuex getters, computed values, etc.

Demo & docs

https://vuelidate.js.org/

Vue 3 support

Vue 3 support is almost here with the Vuelidate 2 rewrite. Check out the next branch to see the latest progress.

Installation

npm install vuelidate --save

You can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation configuration.

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Alternatively it is possible to import a mixin directly to components in which it will be used.

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({ mixins: [validationMixin], validations: { ... } })

The browser-ready bundle is also provided in the package.

Vue.use(window.vuelidate.default)

Basic usage

For each value you want to validate, you have to create a key inside validations options. You can specify when input becomes dirty by using appropriate event on your input box.

import { required, minLength, between } from 'vuelidate/lib/validators'

export default { data () { return { name: '', age: 0 } }, validations: { name: { required, minLength: minLength(4) }, age: { between: between(20, 30) } } }

This will result in a validation object:

$v: {
  name: {
    "required": false,
    "minLength": false,
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  },
  age: {
    "between": false
    "$invalid": true,
    "$dirty": false,
    "$error": false,
    "$pending": false
  }
}

Checkout the docs for more examples: https://vuelidate.js.org/

Contributing

# install dependencies
npm install

serve with hot reload at localhost:8080

npm run dev

create UMD bundle.

npm run build

Create docs inside /gh-pages ready to be published

npm run docs

run unit tests

npm run unit

run all tests

npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Contributors

Current

Damian Dulisz
Damian Dulisz
Natalia Tepluhina
Natalia Tepluhina
Natalia Tepluhina
Dobromir Hristov
Marina Mosti
Marina Mosti

Emeriti

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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.