Validations

In order to validate fields, we used one of the most popular validations libraries for vue - Vee-Validate It has good documentation and it's pretty easy to use.

import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

For detailed usage please see Vee Validate documentation We will go through the code from the LoginForm.vue from Validation Forms to understand how validations work.

Here is the full template for that specific component.

Login Form 

<card>
  <div slot="header">
    <h4 class="card-title">
      Login Form
    </h4>
  </div>
  <div>
    <base-input label="Email address"
              v-model="model.email"
              v-validate="modelValidations.email"
              :error="getError('email')"
              name="email"
              type="email">
    </base-input>

    <base-input label="Passowrd"
              name="password"
              v-model="model.password"
              v-validate="modelValidations.password"
              :error="getError('password')"
              type="password">
    </base-input>
  </div>
  <div class="d-flex justify-content-center">
    <button type="submit" @click="validate" class="btn btn-fill btn-info btn-wd">Login</button>
  </div>
</card>

The main things you need to notice are

  1. Each field has a name attribute which will be the name of the validation property.
  2. Each field has a v-validate attribute which will contain validation rules for that specific field.
  3. Each field has a text block below the input displaying errors. (In case of base-input component the text block is displayed with the help of error prop)

The javascript for this template is the following

export default {
  data () {
    return {
      model: {
        email: '',
        password: ''
      },
      modelValidations: {
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          min: 5
        }
      }
    }
  },
  methods: {
    getError (fieldName) {
      return this.errors.first(fieldName)
    },
    validate () {
      this.$validator.validateAll().then(isValid => {
        this.$emit('on-submit', this.registerForm, isValid)
      })
    }
  }
}

Vee-validate basically works by linking name attributes and v-validate directives to an errors object which is injected and available in each component. You can check out available validations from vee-validate.

Working example

Login Form 

<template>
    <card title="Login Form">
      <div>
        <base-input label="Email address"
                  placeholder="Email"
                  v-model="model.email"
                  v-validate="modelValidations.email"
                  :error="getError('email')"
                  name="email"
                  type="email">
        </base-input>

        <base-input label="Passowrd"
                  placeholder="Password"
                  name="password"
                  v-model="model.password"
                  v-validate="modelValidations.password"
                  :error="getError('password')"
                  type="password">
        </base-input>
      </div>
      <div class="d-flex justify-content-center">
        <button type="submit" @click.prevent="validate" class="btn btn-fill btn-info btn-wd">Login</button>
      </div>
    </card>
</template>
<script>
  export default {
    data () {
      return {
        model: {
          email: '',
          password: ''
        },
        modelValidations: {
          email: {
            required: true,
            email: true
          },
          password: {
            required: true,
            min: 5
          }
        }
      }
    },
    methods: {
      getError (fieldName) {
        return this.errors.first(fieldName)
      },
      validate () {
        this.$validator.validateAll().then(isValid => {
          this.$emit('on-submit', this.registerForm, isValid)
        })
      }
    }
  }
</script>
<style>
</style>

You can check more examples inside src/components/Dashboard/Forms/ValidationForms/ There are some forms which have validations declared in a similar way

← Date & Time Pickers →