onInvalidSubmit在vee-validate版本(^4.5.2)中不起作用

Question

我试图捕捉表单中的错误，必须在模态中显示它们。但是vee-validate onInvaidSubmit似乎不起作用。

PS:我从https://vee-validate.logaretm.com/v4/guide/components/handling-forms

复制了这个例子Vue Version: 3, vee-validate: 4.5.11

<template>
<Form v-slot="{ validate }" :validation-schema="schema">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button @click="validate">Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {
const schema = yup.object({
email: yup.string().required().email(),
password: yup.string().required().min(8),
})
return {
schema,
}
},
methods: {
onSubmit(values) {
// Submit values to API...
alert(JSON.stringify(values, null, 2))
},
onInvalidSubmit({ values, errors, results }) {
console.log(values) // current form values
console.log(errors) // a map of field names and their first error message
console.log(results) // a detailed map of field names and their validation results
},
},
}
</script>

Answer 1

尝试将下面的操作添加到Form元素中。见下文

<Form v-slot="{ validate }" :validation-schema="schema" @invalid-submit="onInvalidSubmit">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button @click="validate">Submit</button>
</Form>