vue-coe-validator ✅

Another validation form for the Vue. Validates input fields of multiple forms and displays errors.

Note: without any dependencies.

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.

take a look at the issue

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

default message: Must be a alphabetic value
type: Boolean

{
  alphabetic: true
}

alpha

default message: Must only contain letters and numbers
type: Boolean

{
  alpha: true
}

pattern

default message: Invalid, try again
type: String

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

numeric

default message: Must be a numeric value
type: Boolean

{
  numeric: true
}

required

default message: Field is required
type: Boolean

{
  required: true
}

custom

default message: Campo inválido
type: Array

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

customAsync

default message: Campo inválido
type: Array

{
  customAsync: [
    value => new Promise(resolve => setTimeout(() => {
      resolve(value === 'viniazvd@gmail.com')
    }, 2000)),
    value => new Promise(resolve => setTimeout(() => {
      resolve(typeof value === 'string')
    }, 3000))
  ]
}