vee-validate Проверка несуществующего поля

При проверке группы полей отображается ошибка для полей, скрытых в DOM с атрибутом v-if.

Например, у меня есть 3 поля:

<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />

Когда я запускаю свою функцию отправки, я проверяю, что ни одно из полей не содержит ошибок:

this.$validator.validateAll().then(() => {
  ... my check
});

Я вижу следующую ошибку:

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#3". Use "attach()" first.

Отсоединение и повторное присоединение моего поля «foobar» при обновлении состояния «showMe» кажется многословным. Особенно для моих больших многоступенчатых форм.

Есть ли более простой способ предотвратить появление этой ошибки?


vue.js vee-validate
person Daniel Richter    schedule 26.08.2019    source источник
comment
использовать v-show вместо v-if?   -  person Ryley    schedule 26.08.2019
comment
Если я использую v-show, срабатывает `` обязательная '' проверка, и я вижу ошибку, что я не заполнил все обязательные поля.   -  person Daniel Richter    schedule 28.08.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вам необходимо объединить v-show с динамически применяемыми правилами проверки. Здесь вы передаете правила как объект, причем первый ключ: значение является именем правила и логическим значением for, если требуется (которое может быть таким же, как логическое значение v-if).

Для VeeValidate 2 (под вопросом старая версия)

<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />

См. пример песочницы для VeeValidate2

Для VeeValidate 3

<validation-provider rules="required">
    <input type="text" v-model="foo">
</validation-provider>

<validation-provider :rules="{required: showMe}">
   <input type="text" v-model="bar" v-show="showMe">
</validation-provider>

См. пример песочницы для VeeValidate 3.

person Rory    schedule 04.04.2020

arrow_upward
0
arrow_downward

Если вы хотите запустить проверку скрытого ввода, вам просто нужно установить для поля display значение none:

<input style="display: none">

Этот метод мне подходит!

person Mojtaba Meskin    schedule 13.06.2021