JSFiddle - React, Tailwind, and code Playground

by Alejandro Hernández

HTML

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">
    <div class="field" :class="{error: errors.has('email')}">
      <label>Email</label>
      <input type="email" name="email" placeholder="Email" v-validate="'email'" v-model="email">
      <span class="error" >{{errors.first('email')}}</span>
    </div>
    <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

CSS

@import url('https://unpkg.com/[email protected]/semantic.css');

span.error {
  color: #9F3A38;
}

JavaScript

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()
      
      if (!this.errors.any()) {
        alert('submit')
      }
    }
  }
})