To help you get started, we've collected the most common ways that vuelidate is being used within popular public projects.

DefinitelyTyped / DefinitelyTyped / types / vuelidate / vuelidate-tests.ts View on Github

required,
            integer
        },
        coolFactor: {
            required,
            decimal
        },
        flatA: { required },
        flatB: { required },
        forGroup: {
            nested: { required }
        },
        validationGroup: ['age', 'coolFactor', 'flatA', 'flatB', 'forGroup.nested'],
        people: {
            required,
            minLength: minLength(3),
            $each: {
                name: {
                    required,
                    minLength: minLength(2)
                }
            }
        },
        username: {
            required,
            isUnique(value: string) {
                // standalone validator ideally should not assume a field is required
                if (value === '') return true

                // simulate async call, fail for all logins with even length
                return new Promise((resolve, reject) => {
                    setTimeout(() => {

View more ways to use vuelidate

vuelidate

> Simple, lightweight model-based validation for Vue.js

Sponsors

Gold

Silver

Bronze

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

Natalia Tepluhina

Dobromir Hristov

Marina Mosti

Emeriti

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

• Monterail
• Paweł Grabarz

License

MIT