Vue, vualidate как начать валидацию?

Question

[ettaluni]

Доброго дня! Не могу, разобраться как свалидировать на vue3. В примерах vualidate все на другом уровне, у меня же простая html страничка.
На ней форма, на форму событие v-on:submit(submit отрабатывает, евент есть), в js теле vue:

methods: {
				send: function (e) {
					alert('Go');

					return false;
				}
			},
			validations () {
				return {
					surname: { requaried },
					name: { requaried },
					phone: {
						requaried,
						minLength: minLength(11),
					}
				}
			}

Я не могу разобраться как проверить, то или иное поле, как получить статус валидации по тому или иному полю. Подскажите кто работал с этой библиотекой

Answer 1

[Вадим]

vuelidate смотрит на Ваши свойства в data(){} и делает computed свойства, подписываясь на них, когда Вы указываете их в соответствующем объекте validations.
Пример:

data() {
  return {
    name: '',
  },
},
validations() {
  return {
    name: { required },
  },
},

где то в шаблоне:

<input type="text" v-model="name" @input="$v.name.$touch()"/>

Или
<input type="text" v-model="$v.name.$model"/>
Во втором случае автоматически вызывается метод $touch, который определяет "трогал" ли пользователь поле, а значение, которое ввели в поле прописывается в data.name и в $v.name.$model.
Потрогал ли пользователь поле отображается в свойстве $v.name.$dirty;
Так как мы передали валидатор required, то там же можно будет и посмотреть текущий статус этого валидатора:
$v.name.required;
Там ещё есть много других полезных свойств.
Можно опираться, например, на $v.name.$invalid
или на

$v.name.$dirty && !$v.name.required // означает что поле потрогали и условие в required НЕ выполнилось. Когда поле будет заполнено - required вернёт true

Под "потрогали" предполагается что пользователь не просто установил фокус в поле и вышел из него, а что-то ввёл.

Так же можно посмотреть общий статус валидации текущего компонента в корне $v.$invalid и тд

Comments

[ettaluni]

Я пытаюсь использовать код котрый ты мне дал, поместил метод $v.name.touch() в функцию onSubmit.
Получаю ошибку Uncaught ReferenceError: $v is not defined
Я вот, тоже читал документацию оп vualidate, откуда этот $v взялся? Это наверное Vue2 я пишу на Vue3, может из-за этого не работает?

[Вадим]

ettaluni, В указанном коде $v.name.$touch() использовался только в шаблоне.
Соответственно, в методах он доступен по this.$v

Во vue3 не пользовался.

На сайте написано что текущая версия для vue2.

На гитхабе есть такой вот пункт, касающийся vue3 https://github.com/vuelidate/vuelidate#vue-3-support
И ветка где описано как пользоваться с третьей версией https://github.com/vuelidate/vuelidate/tree/next

[ettaluni]

Вадим, Спасибо, спасибо! Быстро сменил версию на vue2 и $v через this.$v увидел

[Вадим]

ettaluni, Не за что. И Вам не нужно вызывать $touch() в обработчике сабмита. В обработчике сабмита нужно проверять $invalid. Если $invalid - true, значит форма не валидна и отправлять её не нужно.