vue-coe-validator ✅

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

Note: without any dependencies.

✨ Example✨

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 === '[email protected]')
    }, 2000)),
    value => new Promise(resolve => setTimeout(() => {
      resolve(typeof value === 'string')
    }, 3000))
  ]
}