Skip to content

Custom validators

Oscar edited this page Nov 12, 2018 · 2 revisions

On the fly

To define a custom validator on the fly give it a name and define it as a function.

Example:

vdRules: {
   fullName: {
      required: true,
      minlen: 5,
      checkFullName(fullName) {
         let error;

         if (!fullName || fullName.indexOf(' ') === -1)
            error = 'Invalid full name';

         return error || true;
      }
   }
}

Defining own validators

You can define validators to reutilize them in multiple components to avoid repeating code.

For that, first create you validators library and define them. Check the implemented validators as reference if you don't know how.

Next import them from your component and add them to the property vdValidators of you component. Then you can use that rule.

Lets imagine that we added the previous validator. Example:

import VueDaval from 'vue-daval';
import * as Validators from '@/libraries/Validators.js';

export default {
   mixins: [ VueDaval ],

   data: () => ({
      fullName: undefined
   }),

   vdRules: {
      fullName: {
         required: true,
         minlen: 5,
         checkFullName: true
      }
   },

   vdValidators: Validators,

   vdMessages: {
      checkFullName: 'This is not a valid full name'
   }
}