Vue Validation

issue

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <input-component name="name" label="Name" :value=name @input="updateName" validations="required|min:7" hint="Enter name Here . . ."></input-component>
  <br>
  <input-component name="family" label="Family" :value=familyName @input="updateFamilyName" validations="required|max:7" hint="Enter Family Here . . ."></input-component>
  <br>
  <br>
  <button @click="$validator.validateAll()">Validate All</button>
</div>

CSS

* {
  outline: none;
}

body {
  padding: 20px 30px;
  font-family: 'segoe ui'
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}

em {
  display: block;
  font-size: 10px;
  font-style: normal;
  color: #d82828;
}

input {
  font-family: 'segoe ui';
  border-radius: 3px;
  padding: 10px;
  border: 1px solid #ddd;
}

input:focus {
  border-color: rebeccapurple;
}

button {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #777;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: rebeccapurple;
  border-color: rebeccapurple;
  color: #fafafa;
}

JavaScript

const config = {
  aria: false,
  classNames: {},
  classes: false,
  delay: 0,
  errorBagName: 'errors',
  events: 'input|blur',
  fieldsBagName: 'fields',
  i18n: null,
  i18nRootKey: 'validations',
  inject: true,
  locale: 'en',
  strict: true,
  validity: false
}

Vue.use(VeeValidate, config);

Vue.component('input-component', {
  inject: ['$validator'], // inject parent validator
  props: {
    label: {
      type: String,
      default: null
    },
    value: {},
    type: {
      type: String,
      default: 'text'
    },
    hint: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: Boolean,
      default: true
    },
    validations: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: null
    },
    name: {
      type: String,
      default: null
    }
  },
  computed: {
    localId_() {
      if (typeof this._uid !== 'undefined') {
        return '__Ch__' + this._uid
      }
    },
    safeId() {
      const id = this.id || this.localId_ || null
      return id || null
    },
    safeName() {
      return this.name || this.safeId
    },
    hasError() {
      return this.errors.has(this.safeName)
    }
  },
  template: `<div class="input-row">
    <label :for="safeId" v-if="label" class="lable">{{label}}</label>
    <input :id="safeId"
           :name="safeName"
           :type="type"
           :placeholder="hint"
           :readonly="readonly"
           :autocomplete="!autocomplete ? 'off' : null"
           :disabled="disabled"
           :class="{error:hasError}"
           :value="value"
           v-validate="validations"
           @input="$emit('input', $event.target.value)">
    <em v-if="hasError" class="error">{{ errors.first(safeName) }}</em>
  </div>`
});

new Vue({
  el: '#app',
  data: {
    name: 'John',
    familyName: 'Doe'
  },
  //...