vee-validate example

by vi161

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|email'" v-model="email">
        <span class="error" v-if="errors.has('email')">{{errors.first('email')}}</span>
      </div>
      <div v-for="(field,index) in fields" :key="index">
      <div>
        <input :name="'testfield'+index" type="text" class="form-control" v-validate.disable="'required'">
        <div class="error" v-show="errors.has('testfield'+index)">{{errors.first('testfield')}}
        </div>
      </div>
    </div>
    <button type="submit" class="ui submit button">Submit</button>
  </form>
  <button @click="addField()">
    Add Field
  </button>
</div>

CSS

@import url('https://unpkg.com/[email protected]/semantic.css');
span.error {
  color: #9F3A38;
}

JavaScript

/* Vue.use(VeeValidate)

VeeValidate.Validator.updateDictionary(dictionary); */

let dictionary = {
  fieldsBagName: 'vFields',
  dictionary: {
    en: {
      custom: {
        email: {
          required: 'Your email is emptyfgffg' // messages can be strings as well.
        },
        testfield: {
          required: 'Field required'
        }
      }
    }
  }
};

VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate, dictionary);

new Vue({
  el: '#app',
  data() {
    return {
      email: '',
      fields: []
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()

      if (!this.errors.any()) {
        alert('submit')
      }
    },
    addField() {
      console.log('iu');
      this.fields.push({
        value: '',
        name: 'test'
      })
      console.log(this.fields)
    }
  }
})