JSFiddle - React, Tailwind, and code Playground

by Abdelrahman Awad

HTML

<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.8"></script>
<div id="app">
  <input name="input_1" type="text" v-validate="'custom_validation'" v-model="input1">
  <input name="input_2" type="text" v-validate="'custom_validation'">
  <input name="input_3" type="text" v-validate="'required|custom_validation'">
  <input name="input_4" type="text" :value="input4" readonly>
  <pre>{{ errors.items.map(c => c.msg) }}</pre>
  <button type="button" @click="all">All</button>
</div>

JavaScript

Vue.use(VeeValidate);

VeeValidate.Validator.extend('custom_validation', (value) => {
    return value === 'valid'
});

new Vue({
	el: '#app',
  created () {
  	this.$validator.attach('input4', 'required|custom_validation', {
    	getter: () => this.input4
    });
  },
  data () {
    return {
    	input1: 'invalid'
    }
  },
  computed: {
  	input4 () {
    	return this.input1
    }
  },
  watch: {
    input4 (value) {
      this.$validator.validate('input4', value)
    }
  },
  methods: {
  	all() {
    	this.$validator.validateAll();
    }
  }
});