Есть форма заказа с 3 полями, которая открывается в модальном окне. Для валидации использую vee-validate. Стоит поставить фокус хоть в одно из полей, как сразу у всех 3 полей появляются ошибки. пробовала вставить форму не в модалку, все отлично работает. Как настроить валидацию?
<transition name="modal">
<main class="builder-order-form">
<form @submit.prevent="validateBeforeSubmit" name="builderOrder">
<label class="builder-order-form__label form__label" for="builderOrderName">
<span v-if="errors.has('builderOrderName')">{{ errors.first('builderOrderName') }}</span>
<span v-else>ваше имя</span>
</label>
<input
v-validate.disabled data-vv-rules="required"
v-model="name"
name="builderOrderName"
type="text"
class="builder-order-form__input form__input"
id="builderOrderName"
data-vv-as="builderOrderName"
data-vv-scope="builderOrder"
data-vv-name="builderOrderName"/>
<label class="builder-order-form__label form__label" for="builderOrderPhone">
<span v-if="errors.has('builderOrderPhone')">{{ errors.first('builderOrderPhone') }}</span>
<span v-else>номер телефона</span>
</label>
<the-mask
@blur.native="$validator.validate('builderOrderPhone')"
v-validate.disabled data-vv-rules="length:10|required"
name="builderOrderPhone"
id="builderOrderPhone"
class="builder-order-form__input form__input"
type="tel"
mask="+7 (PNN) NNN-NN-NN"
:tokens="phoneToken"
v-model="phone"
data-vv-as="builderOrderPhone"
data-vv-scope="builderOrder"
data-vv-name="builderOrderPhone"/>
<p v-if="phone && phone.length === 10" class="builder-order-form__phone-msg">
Пожалуйста, проверьте правильность введенного номера
</p>
<label class="builder-order-form__label form__label" for="builderOrderEmail">
<span v-if="errors.has('builderOrderEmail')">{{ errors.first('builderOrderEmail') }}</span>
<span v-else>e-mail</span>
</label>
<input
v-validate.disabled data-vv-rules="email|required"
v-model="email"
class="builder-order-form__input form__input"
type="email"
name="builderOrderEmail"
id="builderOrderEmail"
data-vv-as="builderOrderEmail"
data-vv-scope="builderOrder"
data-vv-name="builderOrderEmail" />
<button type="submit">Отправить</button>
</form>
</main>
</transition>
Простой
