VeeValidate scoped validation doesn't work

Question

I'm building a web application which has several forms on the same page, so scoped validation from VeeValidate looked like an obvious choice, but I can't make it work.

No matter what I do, model is always valid. I built a small example to help you help me ???? https://jsfiddle.net/pvkovalev/3vwp9zdo/

Here is my HTML code:

<div id="app">
  <div data-vv-scope="InformationStep1">
    <input v-model="input1" v-validate="{required: true}" />
  </div>
  <div data-vv-scope="InformationStep2">
    <input v-model="input2" v-validate="{required: false}" />
  </div>
  <input type="button" @click="validate" value="validate" />
</div>

And JS:

Vue.use(VeeValidate)

new Vue({
  el: "#app",
  data: {
    input1: undefined,
    input2: 'not required'
  },
  methods: {
    validate: function (){
        this.$validator.validateAll('InformationStep1').then((result) => {
        alert('InformationStep1 valid: '+ JSON.stringify(result))
      })
      this.$validator.validateAll('InformationStep2').then((result) => {
        alert('InformationStep2 valid: '+ JSON.stringify(result))
      })
    }
  }
})

What did I miss here? Perhaps, something obvious. Any help appreciated!

Pavel Kovalev Pavel Kovalev · Accepted Answer · 2018-12-31T18:06:36

I found it!

Okay, so the solution is to use form tag, not a div tag. As soon as I changed it, it works like a charm.

Here is a new code:

<div id="app">
  <form data-vv-scope="InformationStep1">
    <input v-model="input1" v-validate="{required: false}" />
  </form>
  <form data-vv-scope="InformationStep2">
    <input v-model="input2" v-validate="{required: true}" />
  </form>
  <input type="button" @click="validate" value="validate" />
</div>

and new fiddle https://jsfiddle.net/pvkovalev/1L5t3dsc/

VeeValidate scoped validation doesn't work

1 Answers