VeeValidate 范围验证不起作用答案

【问题标题】：VeeValidate scoped validation doesn't workVeeValidate 范围验证不起作用
【发布时间】：2019-05-26 17:11:52
【问题描述】：

我正在构建一个在同一页面上有多个表单的 Web 应用程序，因此 scoped validation from VeeValidate 看起来是一个显而易见的选择，但我无法让它工作。

无论我做什么，模型总是有效的。我建立了一个小例子来帮助你帮助我???? https://jsfiddle.net/pvkovalev/3vwp9zdo/

这是我的 HTML 代码：

<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>

还有 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))
      })
    }
  }
})

我在这里错过了什么？也许，一些显而易见的事情。任何帮助表示赞赏！

【问题讨论】：

标签： vuejs2 vee-validate

【解决方案1】：

我找到了！

好的，所以解决方案是使用 form 标签，而不是 div 标签。一旦我改变它，它就像一个魅力。

这是一个新代码：

<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>

还有新的小提琴https://jsfiddle.net/pvkovalev/1L5t3dsc/

【讨论】：