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-beta.23"></script>
<div id="app">
  <input name="input_1" type="text" v-validate="'custom_validation'">
  <input name="input_2" type="text" v-validate="'custom_validation'">
  <input name="input_3" type="text" v-validate="'required|custom_validation'">
  {{ errors }}
  <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',
  methods: {
  	all() {
    	this.$validator.validateAll();
    }
  }
});