Vee-validate, validateAll

by StpFlp_DDK

HTML

<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>
  
  <div id="app">
    <h1>Add Items</h1>
    Product Name : 
    <input
           type="text"
           name="product"
           v-model="product"
           v-validate="'required|alpha_dash'"
           >
    <span style="color:red;">{{errors.first('product')}}</span>
    <br>
    Product Price : 
    <input 
           type="number" 
           name="price" 
           v-model="price"
           v-validate="'required|min_value:100|max_value:500'"
           >
    <span style="color:red;">{{errors.first('price')}}</span>
    <br>
    <button @click="submit">Save</button>
  </div>

Vue

Vue.use(VeeValidate)

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