Vue + Vee Validate 3 Trigger Ручная проверка - PullRequest
Новая
       9

Vue + Vee Validate 3 Trigger Ручная проверка

0 голосов
/ 03 ноября 2019

У меня почти работает проверка формы - я использую Vee ​​Validate 3 с Vue.js. Большинство примеров Vee Validate для версии 2, поэтому я немного борюсь.

Проблема, с которой я сталкиваюсь, вызывает проверку при отправке формы.

Если я нажимаю на текстполе, чтобы сначала сфокусироваться на нем, затем нажмите кнопку отправить, проверка запускается, и я вижу сообщение об ошибке.

Если, однако, я не сначала нажимаю текстовое поле и просто нажимаю кнопку отправкиКнопка, я не вижу сообщения об ошибке.

Можете ли вы помочь мне сделать эту работу без необходимости фокусироваться на текстовом поле, прежде чем я нажму кнопку отправить?

Спасибо!

ОБНОВЛЕНИЕ

Странно, консоль показывает ошибку TypeError: this.validate is not a function в обоих случаях - работает проверка или нет. 

<ValidationProvider rules="required" v-slot="{ validate, errors }">
  <div>
    <input type="text" rules="required">
    <p id="error">{{ errors[0] }}</p>
  </div>
</ValidationProvider>

<script>
export default {
  methods: {
    async validateField() {
      const valid = await this.validate()
    }
  }
};
</script>

1 Ответ

0 голосов
/ 04 ноября 2019

Адам указал мне правильное направление с помощью ValidationObserver.

Этот код работает для меня ... 

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()">
  <ValidationProvider rules="required" v-slot="{ errors }">
    <input type="text">
    <p id="error">{{ errors[0] }}</p>
  </ValidationProvider>
  <button @click="submit()">Submit>/button>
</ValidationObserver>

<script>
import { VslidationProvider, ValidationObserver } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'

export default {
  methods: {
    async submit () {
      const valid = await this.$refs.observer.validate()
    }
  }
};
</script>
...