[英]Vee Validate validation doesn't trigger on form submit
Given a multi-step form using Vee Validate 3.x, I'm having troubles getting my form to trigger validation errors when submitting my form.鉴于使用 Vee Validate 3.x 的多步骤表单,我在提交表单时无法让表单触发验证错误。 It works when interacting with an input, but doesn't trigger when on form submit and I'm struggling to understand why and what I can do to resolve this problem.
它在与输入交互时起作用,但在表单提交时不会触发,我正在努力理解为什么以及我可以做些什么来解决这个问题。
I'll attach a Codepen link for reference, and here's my markup:我将附上 Codepen 链接以供参考,这是我的标记:
<ValidationObserver v-slot="{ handleSubmit, errors }">
<pre>
{{ errors }}
</pre>
<form @submit.stop.prevent="handleSubmit(submitDataFromWizard)">
<h3>Step: {{ editor.step }}</h3>
<br />
<!-- Step 1 -->
<section v-if="editor.step <= 2">
<ValidationObserver :key="1">
<validation-provider
name="first-name"
rules="required|min:2"
v-slot="{ errors, classes }"
>
<label
for="first-name"
class="block text-xs font-medium text-gray-400 mb-2"
>First Name</label
>
<div class="mt-1 relative rounded-md shadow-sm">
<input
key="editor-data-first-name-input"
v-model="editor.data.first_name"
type="text"
id="first-name"
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
:class="getClassesForDataItem(classes)"
placeholder="your first name..."
/>
</div>
<span class="block text-xs text-red-500 mt-1">{{
errors[0]
}}</span>
</validation-provider>
</ValidationObserver>
</section>
<!-- Step 2 -->
<section v-if="editor.step >= 2">
<ValidationObserver :key="2">
<validation-provider
name="last name"
rules="required|min:2"
v-slot="{ errors, classes }"
>
<label
for="last-name"
class="block text-xs font-medium text-gray-400 mb-2"
>Last Name</label
>
<div class="mt-1 relative rounded-md shadow-sm">
<input
key="editor-data-last-name-input"
v-model="editor.data.last_name"
type="text"
id="last-name"
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full py-3 px-4 sm:text-sm border-gray-300 rounded-md mb-2"
:class="getClassesForDataItem(classes)"
placeholder="your last name..."
/>
</div>
<span class="block text-xs text-red-500 mt-1">{{
errors[0]
}}</span>
</validation-provider>
</ValidationObserver>
</section>
<!-- Submit Form -->
<button
type="submit"
class="flex mt-3 py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 rounded-full"
>
<strong v-if="editor.step <= 1">Next step</strong>
<strong v-if="editor.step == 2">Confirm</strong>
</button>
</form>
</ValidationObserver>
And my JS attached is:我附上的JS是:
export default {
data() {
return {
isEditingData: false,
editor: {
step: 1,
data: null,
},
};
},
created() {
this.mockFetchingDataForForm();
},
methods: {
/*
** Editor wizard
*/
submitDataFromWizard() {
if (this.editor.step >= 2) {
alert("submit the form");
}
// next step
this.editor.step++;
},
/*
** Mocked request
** NOTE: in the real app, data for v-model inputs comes from API
*/
mockFetchingDataForForm() {
setTimeout(() => {
this.editor.data = {
first_name: "",
last_name: "",
};
this.isEditingData = true;
}, 2000);
},
/*
** Render classes for data item
*/
getClassesForDataItem(errorClasses, ui = null) {
if (errorClasses && errorClasses.failed) return errorClasses;
if (ui == null) return;
return ui
? "border-indigo-300 ring-indigo-50 ring-2"
: "border-gray-300 ring-gray-50 ring-2";
},
},
};
Codepen link: https://codesandbox.io/s/vee-validate-3-sample-project-forked-dwqtt?file=/src/App.vue:3323-4414 Codepen 链接: https://codesandbox.io/s/vee-validate-3-sample-project-forked-dwqtt?file=/src/App.vue:3323-4414
Looking at your codesandbox it looks like you are using Vee-validate 3.0.10
.查看您的代码框,您似乎正在使用 Vee-validate
3.0.10
。 Which does not have support handleSubmit
as it was introduced in v3.2 .它不支持在v3.2中引入的
handleSubmit
。 Although earlier versions starting with 3.0.11
does contain a reference to handleSubmit
, it was just in beta and was not officially introduced until v3.2 .尽管从
3.0.11
开始的早期版本确实包含对handleSubmit
的引用,但它只是处于测试阶段,直到v3.2才正式引入。
To fix this in your package.json
file change要在
package.json
文件更改中解决此问题
"vee-validate": "3.0.10"`
To至
"vee-validate": "3.4.5"
Then run npm update
to update the package.然后运行
npm update
以更新 package。
Also, I found this article super helpful to help explain versions in npm.此外,我发现这篇文章非常有助于解释 npm 中的版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.