vee-validate example

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="{ required: true, max: 10 }" maxlength="10" v-model="email">
      <span class="error" v-if="errors.has('email') || email.length">max length</span>
      
      <input type="text" v-model="promptname" class="{ 'input': true,'is-invalid': errors.has('promptName') }" data-vv-as="prompt name" v-validate="{ required: true, max: 10 }" maxlength="10" class="form-control taz-textbox" placeholder="Prompt name" name="promptName">
              <div v-if="errors.has('promptName')" class="invalid-feedback">{{ errors.first('promptName') }}</div>              
              <div v-if="!promptname && promptname.length" class="invalid-feedback">max lengt</div>              {{promptname.length}}
    </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: '',
      promptname:'',
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()
      
      if (!this.errors.any()) {
        alert('submit')
      }
    }
  }
})