Vuelidate Validators

This is the standalone validators package for Vuelidate.

Installation

You need to install both this package and Vuelidate.

npm install @vuelidate/core @vuelidate/validators

or with yarn

yarn add @vuelidate/core @vuelidate/validators

Usage

After adding the Vuelidate plugin, you can use the validators by importing them directly. These validators come with error messages out of the box.

import { required, email } from '@vuelidate/validators'

export default {
  data: () => ({
    name: '',
    email: ''
  }),
  validations: {
    name: { required },
    email: { required, email }
  }
}

Raw, no message validators

If you want to use validators without error messages, you can import the raw validators.

import { required, email } from '@vuelidate/validators/dist/raw.esm'

Extending a validator with custom message

You can attach a validation message to a validator via tha withMessage method.

import { common, required } from '@vuelidate/validators'

const requiredWithMessage = common.withMessage(required, 'This field is required and must be filled in')

export default {
  ...,
  validations: {
    name: { requiredWithMessage }
  }
}

Attaching extra data to a validator

If you want to attach extra data properties to validator, so you can use them in the messages and when validating, use the withParams helper.

import { common } from '@vuelidate/validators'

const atLeast = (number) => common.withParams({ number }, (value) => value.length <= number) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}

Combining params and messages

You can combine both helpers to build a validator.

import { common } from '@vuelidate/validators'

const customMinLength = (number) => common.withMessage((value) => value.length <= number, ({ $params }) => `The field must be at least ${$params.number} chars long`)
const atLeast = (number) => common.withParams({ number }, customMinLength(number)) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}

Development

To test the package run

yarn test:unit

To link the package run

yarn link

To build run the package, run:

npm run build