Vuelidate 2

• Официальная документация: https://vuelidate-next.netlify.app/

Состояния валидации

https://vuelidate-next.netlify.app/api/state.html

Встроенные состояния валидации:

$invalid	true если любой из валидаторов, указанных в параметрах, возвращает false
$dirty	true если поле было изменено пользователем хотя бы раз. Устанавливается автоматически, если используется v-model. Можно установить вручную методом $touch, также можно сбросить методом $reset. Также получает значение true, если все потомки имеют значение true.
$anyDirty	true если хоть один из потомков имеет $anyDirty
$model	Ссылка на оригинальную проверенную модель. Это означает, что this.$v.value.$model эквивалентно this.value при чтении, а при записи автоматически обновит модель и вызовет $touch. Это удобно использовать для автоматической маркировки поля как $dirty при первом касании. Хорошо сочетается с модификатором .lazy.
$error	удобный флаг, чтобы решить, следует ли показать сообщение об ошибке. Равняется сочетанию трех условий: this.$dirty && !this.$pending && this.$invalid
$errors	Сбор всех сообщений об ошибках, собранных из всех дочерних свойств и вложенных форм (компонентов Vue). Содержит только ошибки из свойств, где $dirty равно true.
$silentErrors	Сбор всех сообщений об ошибках, собранных для всех дочерних свойств и вложенных форм (компонентов Vue).
$pending	Указывает, ожидает ли какой-либо дочерний асинхронный валидатор в настоящее время. Всегда false, если все валидаторы синхронны.
$params	Содержит типы и параметры всех предоставленных валидаторов на текущем уровне, а также типы и параметры дочерних групп валидации, которые могут быть объявлены с помощью withParams. Полезно в качестве входных данных для вашей системы рендеринга ошибок.
$response	Содержит ответ и отказы валидатора.
$path	Вложенный путь с точечной нотацией текущей ветки формы.

Логика поведения валидации

Пользователь должен ощущать, что форма отзывчивая, интерактивно реагирует на его действия.

Для этого показываем реакцию формы:

• клик на поле — подсветка рамки поля;
• клик на кнопке — эффект нажатия или вздрагивания;
• обнаружение ошибок — появление (желательно анимированное всплытие) заметных цветных сообщений;
• успешная отправка — текст на кнопке меняется на "Отправка..." и добавляется анимированный спинер на короткое время, 2-3 секунды.

В полях со строгим форматом — таких, как телефон или email — использовать фильтры, чтобы уже при вводе не давать ввести ошибочные символы и подсказывать, как можно ввести правильно.

До первого нажатия на нкопку отправки вообще не показывать сообщения об ошибках, даже если не заполнены обязательные поля или заполнены некорректно. Даем пользователю возможность спокойно ввести все, что он хочет (кроме полей с фильтрами).

После первой отправки (submitted==true):

• если пользователь ничего не вводил ни в одно поле ($anyDirty == false), то показываем в районе кнопки сообщение "Заполните, пожалуйста, форму". Через 5 секунд скрываем.
• если $anyDirty (т.е. есть хотя бы одно touched поле), то:
  1. подсвечиваем красным все поля, где required и (или error или touched==false)
  2. показываем сообщение "Заполните, пожалуйста, все необходимые поля"
  3. выводим сообщение об ошибке там, где error

Необязательно:

• после успешного заполнения форм типа email и телефон, возле них показывать поощряющую галочку

См. также

• Валидация форм во Vue.js / Хабр