Урок 5. CRM на VueJS. Валидация с Vuelidate 

Добрый день, очень здорово, что разбираете на таких примерах - реализуете целый проект. Помогает сориентироваться в структуре, чего и как. Кратко, актуально. В общем восторг

Для тех кто будет делать для vue3 - валидатор был изменен. Вот ссылка на новую документацию: vuelidate-next.netlify.app/#installation В документации пока имеются опечатки, поэтому привожу пример своего работающего кода: Логин {{ printError(error.$validator, error.$params) }} import router from "@/router"; import {required, minLength} from '@vuelidate/validators' export default { name: "Login", data: () => ({ login: '', password: '', }), validations: () => ({ login: {required, minLength: minLength(3)}, password: {required, minLength: minLength(6)} }), methods: { submitHandler() { this.$v.$touch() if (this.$v.$error) return router.push('/'); }, printError($name, $param) { if ($name === 'required') { return 'Поле не должно быть пустым' } else if ($name === 'minLength') { return 'Минимальная длина должна быть ' + $param + ' символов' } } } }

Пробираюсь сквозь дебри. Медленно но верно. Спасибо за науку.

Спасибо за труд, всё понятно и полезно :)

Очень курто, спасибо! Особенно радует возможность добавлять собственные методы валидации в Vuelidate

Спасибо за такой даже небольшой разбор библиотеки для валидации! Очень полезная инфа, на самом деле)

Лучший курс по vuejs в рунете!

Отличные уроки, спасибо Владилен

У кого возникли проблемы с динамической валидацией попробуйте заменить data: () => ({ email: '', password: '', }), на data() { return { $v: useVuelidate(), email: '', password: '', } }, Мне помогло

Спасибо за видео, побольше таких!

Хороший урок. Все доходчиво и интересно!

Спасибо за курс.

Пройдено, спасибо за урок)

Спасибо за труд!

Спасибо за уроки. Владилен подскажите на 12:04 на моменте валидации у меня в консоли выскакивают ошибки и некооректно валидируется поле vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "password" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. и аналогичная для email, как их пофиксить? возможно из-за этой ошибки некорректно отрабатывает валидация

Спасибо за урок!

Спасибо Вам за урок.

очень круто, спасибо)

Как всегда годно

Добрый день. Спасибо за подобные уроки, не урывками, а целиком проект. Можете записать подобные уроки по Vue, а в качестве серверной части Laravel? В сети нет не одного такого полного курса, снимите пожалуйста.

Очень курто, спасибо!

Немного не понял зачем самим ставить проверки при присвоении класса invalid. Vuelidate же для того и нужен, чтобы мы не забивали себе этим голову. Мы ему написали условия валидации в validations, а дальше нам остается лишь проверять $v.email.$error, и по нему определять прошли мы валидацию или нет, и выставлять нужный класс. Еще я повесил на инпут событие @focus="$v.email.$reset()" - это для того, чтобы ошибка валидации исчезала, если юзер поставил курсор в поле

Можно ли в объекте Methods писать методы стрелочной функцией? Будет ли принципиальная разница?

Спасибо !

Здравствуйте, делаю диплом в ускоренном темпе, поэтому решил часть кода от сюда взять. Взял авторизация, но в nuxt.js он переменную $v инициализирует после того как отрисовывает шаблон. Как это исправить?

Спасибо большое, отличный видос!

Спасибо

были проблемы c установкой плагина Vuelidate, вот решение vuelidate-next.netlify.app/#install-via-plugin-in-vue-3-0 И да, огромное спасибо автору за труд, за информацию. Это реально лучшие видео курсы по JS во всём рунете :) Очень мотивируют двигаться вперёд!

Привет! Как использовать vuelidate в nuxt js? установил зависимость, создал плагин подключил его в nuxt.config.js , делаю по видео и не работает валидация.

Спасибо большое за видос все супер. Как новичку во Vue было сложно сладить с Vuelidate пришлось покопаца в интеренете все сделал как надо но все равно ничего нормально не работало и в итоге скопировал код из коментариев чтото заработало но клас на input все не добовлялся но в итоге нашол выход. Вот мой код. Домашняя бухгалтерия Email {{ error.$message }} Пароль {{ error.$message }} Войти send Нет аккаунта? Зарегистрироваться import { useVuelidate } from "@vuelidate/core"; import { email, required, minLength, helpers } from "@vuelidate/validators"; export default { setup: () => { return { v$: useVuelidate() }; }, data: () => ({ email: "", password: "", }), validations: { email: { email: helpers.withMessage("Введите корректный Email", email), required: helpers.withMessage( "Поле Email не должно быть пустым", required ), }, password: { required: helpers.withMessage("Введите пароль", required), minLength: helpers.withMessage( ({ $params, $model }) => `Пароль должен быть ${$params.min} символов. Сейчас он ${$model.length}`, minLength(6) ), }, }, methods: { submitHandler() { console.log(this.v$); if (this.v$.$invalid) { this.v$.$touch(); return; } const formData = { email: this.email, password: this.password, }; console.log(formData); this.$router.push("/"); }, }, };

Спасибо, круто

В форме в v-model нужно биндить $v.email.$model . C моделями из даты не работает

А у поля password нормально делать trim?) Вдруг у пользователя пароль начинается или заканчивается пробелом. Он привык к такому паролю, а мы автоматом отформатим его ввод и он потом зайти не сможет, набирая пароль с пробелом по привычке.

Очень полезно

получал *Property or method "$v" is not defined* кучу времени потратил, а оказалось опечатка в свойстве _validations:_ - зато теперь очень хорошо ориентируюсь в документации)) ... плохо, что не было ошибки, вроде _Property or method "validation" is not defined_ так бы сразу заметил, что букву *s* пропустил

а почему у пароля на странице login проверка на длину? разве не на совпадение надо делать)

*Л. а. й. к. о. с.* за видос.

Не пойму, кто тот мерзкий человек, кто дизлайки ставит... идеальный контент. Спасибо

А можно ссылку на видео по vuelidate? а то не могу найти(

Чтобы избежать сложной записи в длине пароля, я бы использовал computed passwordLength + он кеширует значение

спасибо ,

В реальных приложениях допустимо с точки безопасности передавать пароль через formdata или необходимы какие-либо дополнительные манипуляции с безопасностью (шифрование и тд)?

По чему в хроме это ошибка? VM430 content.js:9 Uncaught Error: only one instance of babel-polyfill is allowed at Object. (VM420 content.js:9) at Object. (VM420 content.js:9) at r (VM420 content.js:1) at Object. (VM420 content.js:10) at r (VM420 content.js:1) at VM420 content.js:1 at VM420 content.js:1

комменты тоже помогают продвигать видео ;)

Что за отдельный курс по vue js?

Есть ли смысл выносить проверка $v.email.$dirty && !$v.email.required в computed раз уж они по несколько раз в коде используются?

Делаю то же самое только на реакт. Сначала рвал волосы, но оказалось не так все и страшно. formik + yup. По сути то же самое. Вместо vuex - redux :)

актуально? или лучше сразу с vue.js 3?

Долго разбирался почему у меня не работает валидация и валится ошибка в консоли, в итоге нашел: написал v-modal вместо v-model

Благодаря твоим роликам стал понимать насколько я невнимательный по ночам, поэтому работаю теперь только выспавшись 😂

Привет, Владилен! Хотел бы у тебя спросить, не поменяли ли что-то в vuelidate.Пытался динамически указывать необходимую длину пароля, однако, к сожалению, ничего не работает. Что самое забавное то, что сама валидация происходит корректно. Выводил объект $v.password в консоль, в $v.password.$params.minLength при этом был null, а не min и type.

было бы интересно увидеть урок по валидатору, который просит ввести большую/маленькую буквы + символы + длина пароля

Какая тема установлена ?

Крутые уроки, главное что реальный проект, пусть и тестовый. А не hello world

По поводу Vuetify. Я уже прошел курс Vue на Udemy. И там Владилен использует эту технологию. И надо сказать я порядком попотел, чтобы все заработало, потому что обновления достаточно болезненные, местами совсем другой синтаксис, при этом в документации путаница, а если ты еще и новичок, то совсем беда. А здесь все без каких -либо проблем. Владилен, спасибо за эту практику, но курс тоже хорош.

У меня у одного в $params значения null что у required, что у minLength?

а как подключить vuelidate, если к примеру я НЕ пишу код в файлt .vue, а использую связку html + .js?

у меня после того как написал код для валидации email возникает вот такая ошибка : Uncaught (in promise) TypeError: Cannot read property 'super' of undefined возможно еще у кого-то она была, как решили?

Укого при нажатии на кнопку её фон становится все светлее и светлее... Удалите в main.js import 'materialize-css/dist/js/materialize.min'. Ведь вы его импортируете, что бы использовать "M." там где нужно

Спасибо за уроки, все круто.Но сделать такой minLenght не получилось, в консоле у меня показывать minLenght: Null, хотя vuelidator такой-же как у вас на видео

Владилен, кажется лучше делать let formData, чем const, т.к. можно поймать formData is already declared если например сабмит не сработал в первый раз (проблемы с соединением например). Поправьте если ошибаюсь.

Валидация только на стороне клиента, а серверная не предусмотрена? Она как раз важнее клиентской. Я имею ввиду ответ от сервера и подсветкой полей с ошибками

А в чем разница между платной версией и этим плей листом ?

Здесь у нас документация, ... документацию я особо не вижу )))) но есть строка для копипасты! Тру програмист! )))

Валидация с vuelidate - Cannot convert undefined to object

За уроки конечно спасибо, но получается жесть. Логика раскидана по всему файлу, часть в скрипте, часть в разметке. Что бы вывести 2 разных сообщения с ошибкой у одного инпута ты прописываешь два разных элемента из-за чего разметка сильно разрастается, а если бы у тебя в форме было 20 полей и у каждого больше 2 сообщений?

Привет. В этом (или предыдущем уроке) упомянул видео в котором рассказываешь о фичах Vue.js Видосов много, не нашёл )) Можешь ссылку кинуть? Спасибо.

Спасибо за очень полезное и интересное видео. Хочу обратиться к аудитории: кто делал данное приложение на Vue3? Периодически сталкиваюсь с отличительными моментами в реализации. Валидация один из них. У кого удалось реализовать это на Vue3? Если делать все как на видео, то страница логина не отображается.

$v.password.$params.minLength имеет значение null, никто не сталкивался с этим?

К сожалению, применив все, что здесь было указано, а именно: npm install vuelidate - - save npm install @vuelidate/core @vuelidate/validators Переустановить node, установить LTS версию - ничего не помогло, eslint ругается на зависимости Node v19.0.0, npm v9.2.0 Попробовал npm install vuelidate --force, установилось с нарушением зависимостей, но пока работает Предполагал, что эта ошибка выходит только при установке vuelidate, но оказалось, что после --force он выдаёт такую ошибку зависимостей всякий раз, когда происходит какая-то установка через npm install

ctr c, ctr v, ctl c ctrl v круто... а так спасибо

На этом уроке обнаружил косяк. КОгда форму валидировал, несколько раз нажал на кнопку, а она делалась все светлее, светлее, до прозрачного. Потом на меню проверил, тот же эффект. При нажатии остается какой-то стиль, и при переходе на другие страницы не удаляется. При этом если курсоров поводить по ним, то возвращается в нормальное состояние... Записал экран www.dropbox.com/s/bosge31qno9ehey/%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202020-03-07%20%D0%B2%2022.02.49.mov?dl=0 При этом после урока по созданию меню - все было норм, я проверял тогда...

А как сделать, чтобы можно было указать два валидатора, например email и phone. И чтобы ошибка сработала тогда, когда ни один из них не подходит? Я пробовал вот так login: { required, phone, email } Но форма не отправляется, потому что в phone - true, а в email - false, поэтому у $invalid - true. Что делать?

А что за курс?

Столкнулся с проблемой при инсталяции Vuelidate, появилась ошибка: "vue-cli-service" не является внутренней или внешней командой, исполняемой программой или пакетным файлом. Безуспешно пытался исправить на месте, но в итоге решил проблему тем что заново создал CLI проект и в пустой проект установил Materialize (npm install materialize-css@next) и Vuelidate ( npm install vuelidate --save), а потом скопировал вместо новосозданного вот это: Исходный код: drive.google.com/open?id=1elQ... (Новичкам, не удаляйте node_modules) И все заработало.

formData не работает. TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement. Причем только в лисе. В опере, купзилле и даже ишаке работает.

Считаю, что у пароля модификатор trim не нужен. Пользователь может использовать пароль с пробелом

почему у меня $params: Object minLength: null required: null выглядеть так

ну не хочет работать валидация хоть убей, работает только если делать как в документах а если делать как в видео то ошибки одни

Честно говоря местами очень путано, не понятно почему в одном месте с $, а в другом без. Вкратце бы пояснять что значит $touch и т.п.

Не работает Ваша валидация

Все таки Владилен Минин нуб. Знает основы, а когда дело доходит до имплементации голову себе и другим морочит. Устал от таких в русскоязычном сегменте

Если кто то пишет на Vue.js 3 как и я) , Ниже код шаблона Логина который работает и написан на Vue 3 c vuelidate для данного урока Домашняя бухгалтерия Email {{ error.$message }} Пароль {{ error.$message }} Войти send Нет аккаунта? Зарегистрироваться import { useVuelidate } from "@vuelidate/core"; import { email, required, minLength, helpers } from "@vuelidate/validators"; export default { setup: () => { return { v$: useVuelidate() }; }, data: () => ({ email: "", password: "", }), validations: { email: { email: helpers.withMessage("Введите корректный Email", email), required: helpers.withMessage( "Поле Email не должно быть пустым", required ), }, password: { required: helpers.withMessage("Введите пароль", required), minLength: helpers.withMessage( ({ $params, $model }) => `Пароль должен быть ${$params.min} символов. Сейчас он ${$model.length}`, minLength(6) ), }, }, methods: { submitHandler() { console.log(this.v$); if (this.v$.$invalid) { this.v$.$touch(); return; } const formData = { email: this.email, password: this.password, }; console.log(formData); this.$router.push("/"); }, }, };

Очень курто, спасибо!

Спасибо!

Спасибо!