Проверка области действия VeeValidate не работает - PullRequest
Новая
       23

Проверка области действия VeeValidate не работает

0 голосов
/ 29 декабря 2018

Я создаю веб-приложение, имеющее несколько форм на одной странице, поэтому проверка в рамках 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))
      })
    }
  }
})

Что я сделалскучаешь здесь?Возможно, что-то очевидное.Любая помощь приветствуется!

1 Ответ

0 голосов
/ 31 декабря 2018

Я нашел это!

Хорошо, поэтому решение состоит в том, чтобы использовать тег формы , а не 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/

...