web-dev-qa-db-ja.com

Vue + Vee Validate 3 Trigger Manual Validation

フォーム検証がほぼ機能しています。Vee.jsでVee Validate 3を使用しています。 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>
vue.jsvee-validate
2
Damian

Adamは、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>
3
Damian