VeeValidateで一括検証+スクロールするmixins
v3ではValidationObserver
が追加され、一括検証が楽になった(v2知らない😇)
一括検証+エラーの要素にスクロールできれば嬉しいはずなので、そのmixinsを書く。
スクロールはお任せで、vue-scrolltoとかいいんじゃないかしら。
page/hoge.vue
<ValidationObserver ref='observer'> <ValidationProvider/> <ValidationProvider/> </ValidationObserver> <script> import Validate from '~/mixins/validate' export default { mixins: [ Validate ], methods: { async onSubmit() { if (!await this.validateAll()) { // Do something } } }, } </script>
mixins/validate.js
export default { methods: { async validateAll() { const result = await this.$refs.observer.validate() const ref = Object.values(this.$refs.observer.refs) .filter((ref) => ref.errors.length > 0)[0] // refに対してスクロールやらなんやら return result } }