Installation & Usage

Installation

Installation is very simple, just use npm like this:

npm install --save vue-daval

Usage

VueDaval is a mixin, so as such it has to be declared in your component.

import VueDaval from 'vue-daval';

export default {
   mixins: [ VueDaval ],

   ...
}

Now in your code add the rules per data path that you want to validate and where you want to display the errors.

<form @submit.prevent="doLogin">
   <input v-model="login.email">
   <div v-show="$vd.login.email.$error" class="invalid-feedback">
      {{ $vd.login.email.$error }}
   </div>

   <input type="password" v-model="login.password">
   <div v-show="$vd.login.password.$error" class="invalid-feedback">
      {{ $vd.login.password.$error }}
   </div>

   <button type="submit">Login</button>
</form>

<form @submit.prevent="doRegister">
   <input v-model="register.alias">
   <div v-show="$vd.register.alias.$error" class="invalid-feedback">
      {{ $vd.register.alias.$error }}
   </div>

   <input type="email" v-model="register.email">
   <div v-show="$vd.register.email.$error" class="invalid-feedback">
      {{ $vd.register.email.$error }}
   </div>

   <input type="password" v-model="register.password">
   <div v-show="$vd.register.password.$error" class="invalid-feedback">
      {{ $vd.register.password.$error }}
   </div>

   <button type="submit">Register</button>
</form>

import VueDaval from 'vue-daval';

export default {
   mixins: [ VueDaval ],

   data: () => ({
      login: {
         email: undefined,
         password: undefined
      },

      register: {
         alias: undefined,
         email: undefined,
         password: undefined
      }
   }),

   vdRules: {
      login: {
         email: { required: true, type: 'email' },
         password: { required: true, minlen: 5 }
      },

      register: {
         alias: { required: true, minlen: 5, checkAlias: (alias) => {
            return alias === 'admin'? 'Alias already in use' : true;
         }},
         email: { required: true, type: 'email', checkEmail: (email) => {
            return this.$http.post('/users/check/email', { email: email });
         }},
         password: { required: true, minlen: 5 }
      }
   },

   methods: {
      doLogin() {
         this.$vd.login.$validate().then(() => {
            this.$http.post('/users/login', this.login);

         }).catch(() => {
            alert('Error in login form');
         });
      },

      doRegister() {
         this.$vd.register.$validate().then(() => {
            this.$http.post('/users/register', this.register);

         }).catch(() => {
            alert('Error in register form');
         });
      }
   }
}