JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p>
    Name: <input :class="{ error: errors.has('name') }" type="text" v-validate.disable="'required|alpha_num'" name="name">
    <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
  </p>
  <p>
    Email: <input :class="{ error: errors.has('email') }" type="text" v-validate.disable="'required|email'" name="email">
    <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
  </p>
  <input type="submit" value="Submit" @click="validateForm">
</div>

CSS

body {
  font-family: helvetica;
}

span.error {
  color: red;
}

input {
  border: 1px solid black;
}

input.error {
  border: 1px solid red;
}

JavaScript

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  methods: {
  	validateForm() {
    	this.$validator.validateAll().then(() => {
      
        if (!this.errors.any()) {
          alert('woo no errors');
          // call form submission logic
        }
      });
    }
  }
});