Vee在提交表单时验证3个catch错误 [英] Vee Validate 3 catch errors on form submit

问题描述

如果表单提交在vee-validate中失败，我该如何捕捉?我有以下组件

How do i catch if form submit fails in vee-validate? I have the following component

<template>
  <ValidationObserver tag='div' class='bg-white pt-6 pb-6 mb-4' v-slot='{ handleSubmit }'>

   <form
      @submit.prevent='handleSubmit(onSubmit)'
      class='mx-auto rounded-lg overflow-hidden pt-6 pb-6 space-y-10'
      :class="{'is-loading' : isLoading}"
    >
      <div class='flex flex-wrap -mx-3 mb-6'>
        <div class='w-full md:w-3/12 px-3 mb-6 md:mb-5'>
          <ValidationProvider v-slot='{ classes, errors }' rules='required' name='Anrede'>
          <CustomSelect :options='gender'
                        placeholder='Anrede *'
                        v-model='form.gender'
                        :class="classes"
          />
            <span class='text-mb-error font-medium text-sm italic'>{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
</div>
   <div class='block'>
        <button
          class='bg-secondary hover:bg-secondary-200 text-white py-3 px-4 w-full mt-5 focus:outline-none'
          type='submit'
        >
          Registrieren
        </button>
      </div>
    </form>
  </ValidationObserver>
</template>

作为方法，我具有以下功能

as method I have the following function

 onSubmit () {
      alert()
      console.log(this.$refs.observer)

      this.$emit('onSendRegistration', this.form)
    }

如果表单有效，则工作正常，但如果失败则永远不会执行.如果表单验证失败，我在哪里可以找到?

which works fine if form is valid but if it fails never gets executed. Where can I catch if form validation fails?

推荐答案

根据文档:

[ handleSubmit ]调用验证(如validate)并更改提供者的状态，并接受仅在验证成功后才运行的回调.

[handleSubmit] calls validation like validate and mutates provider's state, accepts a callback to be run only if the validation is successful.

因此，如果在验证错误时运行回调，则必须使用 ValidationObserver 中的 ref 以编程方式触发验证.

So to run a callback in the case of an error in validation you would have to trigger the validation programmatically using a ref in the ValidationObserver.

您打开的 ValidationObserver 标记现在应如下所示:

Your opening ValidationObserver tag would now look like this:

...
<ValidationObserver tag='div' class='bg-white pt-6 pb-6 mb-4' ref='form'>
...

您的开始 form 标记现在应如下所示:

Your opening form tag should be now like this:

...
<form
  @submit.prevent='onSubmit'
  class='mx-auto rounded-lg overflow-hidden pt-6 pb-6 space-y-10'
  :class="{'is-loading' : isLoading}"
>
...

您的 onSubmit 方法应类似于以下内容:

And your onSubmit method should be something like this:

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

    alert('Form has been submitted!');

  });
}

除了这种编程方法之外，没有等效于 handleSubmit 的方法，用于在提交无效表单后运行回调函数.

Besides this programmatic approach there's no equivalent to handleSubmit for running a callback function after an invalid form submission.

检查文档以获取有关使用 $ refs 进行编程访问.

Check the docs for more info about the programmatic access with $refs.

这篇关于Vee在提交表单时验证3个catch错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！