Vee validate on blur阻止表单提交

Question

我正在使用vee验证vue中的表单。js。验证应该在blur上启动。有一个提交按钮，用于验证表单中的所有字段。

问题是，当我在键入一些输入后单击submit按钮时，只会触发blur事件并验证输入字段。未触发提交事件。如果再次单击该按钮，将触发提交事件。

<form v-on:submit.prevent="submit" autocomplete="off">
    <div>
      <div>{{ errors.first('carNumber') }}</div>
      <input v-model="carNumber" name="carNumber" v-validate="'numeric'"/>
      <button type="submit">Submit</button>
    </div>
</form>

示例代码链接：https://jsfiddle.net/2u6n7xfr/35/

复制步骤：

1. 在输入中键入一些无效值，即：qwerty
2. 单击提交按钮。（未激发提交事件。）
3. 在输入中键入一些有效值，即：1234
4. 单击提交按钮。（未激发提交事件。）

Answer 1

代替

this.$validator.validate("*").then(function(valid) {

与：

this.$validator.validateAll().then(function(valid) {

见：https://jsfiddle.net/Ljo9uw1y/

--

您提到的另一个问题与实际单击按钮有关：我认为您的问题是，当您单击“提交”按钮时，“提交”按钮会“移动”，因此不会触发事件。例如，将错误移至submit按钮下方会导致单击工作：jsfiddle。净/5goe4vcf

一种修复方法是缩小错误消息，使其不会向下产生大气泡，并使“提交”按钮变大，使其在单击过程中不会退出鼠标指针的作用域。