Install

yarn add vue-coe-validator

Include Plugin

import Vue from 'vue'

import { validator } from 'vue-coe-validator'

Vue.use(validator)

Include Mixin (required only on components that need validation)

import { formSetup } from 'vue-coe-validator'

mixins: [ formSetup ]

Pay attention:

Be careful not to create a state with the name: validations and messages.

These names are reserved for the library and overwriting them may compromise their behavior.

How to use

<template>
  <section>
    <form name="form1">
      <c-input
        name="input1"
        :validation="$hasError('input1')"
        v-model="form1.input1"
      />

      <c-input
        name="input2"
        :validation="$hasError('input2')"
        v-model="form1.input2"
      />

      <c-input
        name="input3"
        :validation="$hasError('input3')"
        v-model="form1.input3"
      />
    </form>

    <form name="form2">
      <c-input
        name="input1"
        :validation="$hasError('input1', 'form2')"
        v-model="form2.input1"
      />
    </form>
  </section>
</template>

<script>
import { formSetup } from 'vue-coe-validator'

export default {
  mixins: [ formSetup ],

  data () {
    return {
      form1: { input1: '', input2: '22' },
      form2: { input1: '33' }
    }
  },

  validation: {
    form1: {
      input1: {
        required: true,
        alphabetic: true
      },
      input2: {
        required: true,
        pattern: /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i
      },
      input3: {
        required: true
      }
    },
    form2: {
      input1: {
        required: true,
        alpha: true
      }
    }
  },

  messages: {
    form1: {
      input1: {
        required: 'não pode ser vazio!',
        alphabetic: 'tá errado, é alphabetic!'
      },
      input2: {
        required: 'preenche tudo!',
        pattern: 'precisa ser e-mail!'
      }
    },
    form2: {
      input1: {
        required: 'tá vazio, não pode!'
      }
    }
  }
}
</script>

You can also define validations with directives

<c-input
  name="name"
  :validation="$hasError('name')"
  v-validator="{ required: true }"
  v-model="form1.name"
/>

Or programmatically, using $validator.add

methods: {
  addField () {
    // add new field
    this.form1 = {
      ...this.form1,
      coe: 'mané'
    }

    // create validation for new field
    const validations = {
      coe: { required: true }
    }

    // set validation for new field
    this.$validator.add(validations, 'form1')
  }
}

Rules

Name | required | About ----- | ------- | ----- form | true | set an name for the scope of the form input | true | name the input with the tag name and its respective form value

Mixin methods

Name | Params | About :-----------|:--------------------------------:|:----------- $hasError | (inputName[str], formName[str])| returns a boolean

*formName: required only when you have more than one form

Validator methods

Name | Params | About :--------------|:----------------------------------:|:-------------------- add | (validations[obj], formName[str])| set validation for new field touch | (inputName[str], formName[str]) | touches a field (isTouched = true) resetField | (formName[str]) | resets a field resetForm | (formName[str]) | resets a form validateField | (formName[str]) | touches a field and checks if it is valid validateForm | (formName[str]) | touch the form fields and check if it is valid isFormValid | (formName[str]) | promise that returns a boolean

*formName: required only when you have more than one form

Customize validation messages globally

import { validator } from 'vue-coe-validator'

Vue.use(validator, {
  messages: {
    required: 'must be filled',
    alpha: 'must be alpha'
  }
})

Set validate on blur

import { validator } from 'vue-coe-validator'

Vue.use(validator, { 
  validateOnBlur: true // default is false 
})

Validations

{
  alphabetic: true
}

{
  alpha: true
}

{
  pattern: /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i  
}

{
  numeric: true
}

{
  required: true
}

{
  custom: [
    (value) => value === '123',
    (value) => typeof value === 'string'
  ]
}

{
  customAsync: [
    value => new Promise(resolve => setTimeout(() => {
      resolve(value === '[email protected]')
    }, 2000)),
    value => new Promise(resolve => setTimeout(() => {
      resolve(typeof value === 'string')
    }, 3000))
  ]
}