vee-validate 3 + nuxt 仅在提交时显示错误答案

【问题标题】：vee-validate 3 + nuxt show errors only on submitvee-validate 3 + nuxt 仅在提交时显示错误
【发布时间】：2021-02-09 05:37:34
【问题描述】：

我很难弄清楚只会在提交时触发错误的表单验证。我不想显示内联错误的主要原因是因为这篇文章暗示内联错误提供了比提交时提供错误消息更糟糕的用户体验：

https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/

即使 vee-validate 3 文档声明在提交之前进行验证是“必须”的：

https://logaretm.github.io/vee-validate/guide/forms.html#basic-example

不幸的是，这篇文章涵盖了 vee-validate 2 而不是 3：

How do I stop displaying the inline validation error message in Vuetify?

这篇文章讨论了在提交时捕获错误，但是我不明白如何在提交之前禁用错误： Vee Validate 3 catch errors on form submit

Vee-validate 2 对此有一些明确的说明，但我似乎无法在 Vee-validate 3 文档中找到它： https://vee-validate.logaretm.com/v2/guide/events.html#changing-events-per-field

我正在使用 Vuetify 和 Nuxt，并在我的插件中注册了 vee-validate：

import { extend } from "vee-validate";
import { required, email } from "vee-validate/dist/rules";

extend("required", {
    ...required,
    message: "This field is required"
});

extend("email", {
  ...email,
  message: "This field must be a valid email"
});

我的表单代码：

 <ValidationObserver
    ref="form"
    v-slot="{ invalid, validated, handleSubmit, validate }"
  >
    <v-form @submit.prevent="onSubmit">
      <ValidationProvider
        name="email"
        rules="required|email"
        v-slot="{ errors, valid }"
      >
        <v-text-field
          v-model="email"
          :error-messages="errors"
          :success="valid"
          label="E-mail"
          required
        ></v-text-field>
      </ValidationProvider>

      <ValidationProvider
        name="password"
        rules="required|max:50"
        v-slot="{ errors, valid }"
      >
        <v-text-field
          v-model="password"
          :counter="50"
          type="password"
          :error-messages="errors"
          :success="valid"
          label="Password"
          required
        ></v-text-field>
      </ValidationProvider>
    
      <v-btn color="primary" type="submit">Submit</v-btn>
    </v-form>

脚本部分：

<script>
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data: () => ({
    password: "",
    email: "",
  }),

  methods: {
    onSubmit() {
      this.$refs.form.validate().then((success) => {
        if (!success) {
          // run your error code here
        }

        alert("Form has been submitted!");
      });
    },
  },
};
</script>

提交会触发错误，但也不会阻止它们内联显示。感谢所有的反馈和回复，我想我最后的办法是切换到 vee-validate 2，但这里希望有人知道它是如何在 vee-validate 3 中完成的。

编辑：

我能想出的唯一解决方案是在覆盖错误消息但不覆盖红色下划线的字段上设置 hide-details=""，仅在其下方附加一个由 v-if 触发的跨度。我怀疑这是一个很好的解决方案，但我很想更新它。

<v-text-field
              v-model="email"
              :error-messages="errors"
              :success="valid"
              label="E-mail"
              required
              hide-details=""
            ></v-text-field>
             <span v-if="submitted">{{errors[0]}}</span>

【问题讨论】：

尝试在您的 textfield 插槽中添加 @input="$refs.form.validate()" & @blur="$refs.form.validate()"

标签： vue.js nuxt.js vuetify.js vee-validate

【解决方案1】：

您可以将交互模式设置为passive，它不会对任何事件进行验证。 interaction and ux 部分的文档中提到了这一点。这相当于 v2 中的 events。

https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#passive

【讨论】：