UI-компоненты №13. Валидация и отправка формы на почту в 2022

[@maxgraph]

Друзья, записал небольшое обновление, т.к. новую версию плагина Just-Validate таки поправили) drive.google.com/file/d/19XTGYqh3RK6Fuc64dNATsc9hpQjYDFHs/view?usp=sharing

[@МуратТуреханов-ф7ч]

Что то отправка не идет на почту. Хотя в консоли пишет статус 200 и форма отправлена.

[@alexshev7412]

Файлы на почте не отображаются (нет прикреплённых файлов), в чём причина может быть? Ошибок нет никаких...

[@alexdoronin9803]

@@МуратТуреханов-ф7ч исправил проблему? у меня тоже на почту не приходит, хотя все по видео сделал

[@rvitalia1]

От всей души спасибо. Впервые форма которая работает....и спасибо за обновленный код на гит хабе...Долго крутился со старым кодом, плюнул уже...а потом увидел на гите волшебные слова, что обновлено под новую версию....и чудо, все заработало.... Рад что когда-то давно наткнулся на ваш канал...не раз уже выручал.. Спасибо!!!

[@dexterholland4430]

Давно тебя смотрю, очень помогаешь во многих моментах. Незаслуженное количество подписчиков, считаю, что ты достоин намного большего! Отличная подача, максимально емкое и без воды изложение рассматриваемой темы. Продолжай и дальше в том же духе. Огромное спасибо!

[@maxgraph]

Пожалуйста)

[@begineras]

за такой полезный контент так мало лайков, дружище респект тебе

[@maxgraph]

Спасибо))

[@ildar_massage]

Спасибо большое, добрый человек! Наконец форма, которая работает! "Прикрутил" ее к модальному окну, добавил закрытие и оповещение об успешной отправке. То, что искал.

[@maxgraph]

Пожалуйста)

[@ObsidianHeart666]

Можешь пожалуйста скинуть mail.php без пароля, у меня почему то не получается, выдает 500 статус не пойму где ошибка(

[@olegator500]

Можешь пожалуйста показать, как прикрутил к модальному окну

[@gordollodrog3186]

Спасибо огромное за ваш обучающий контент. Не останавливаетесь не в коем случае))

[@maxgraph]

Пожалуйста)

[@Фанат-щ9ь]

Вот прям как я и хотел, Максим спасибо вам что читаете коментарии.

[@maxgraph]

Рад помочь) пожалуйста)

[@kotofun]

Огромное спасибо за это видео! Все по делу, ничего лишнего, все в итоге работает. Автору респект!

[@maxgraph]

Спасибо)

[@wilezar4835]

Спасибо за видео) p.s. если кто делает через яндекс почту, то тогда надо включить на почте imap(почта --> настройки --> почтовые программы). И там где $mail->Username вводить именно логин, а не адрес почты

[@kotofun]

Максим, я пользуюсь Вашей gulp-сборкой уже несколько месяцев и не могу нарадоваться. Все отлично работает, все удобно, быстро и продуктивно. Лишь одна, пока нерешенная проблема немного печалит. Почему-то, не пойму по какой причине, некоторые js-библиотеки (их немного, но они есть), которые я подключаю к текущему проекту, помещая их в папку /vendor/ отказываются работать. Например, я использую библиотеку GSAP (для анимации элементов на странице сайта). Сама библиотека и большинство плагинов к ней подключаются (через vendor) без проблем и прекрасно работают. Но некоторые плагины при таком подключении выдают ошибку и работать не хотят. Кстати, если их подключать непосредственно в index.html через тег , то некоторые из них работают нормально. Почему так происходит понять не могу. Может быть Вы подскажете? Буду благодарен. Заранее спасибо.

[@maxgraph]

Здравствуйте. Через эту папку никак не подключить js, надо бы её снести. Всё библиотеки только через npm

[@ggo_webdev]

Большое спасибо за такой понятный и очень подробный урок, все детали были расказаны а видео принесло очень крутое понимание процесса создания таких форм для отправки данных)

[@maxgraph]

Пожалуйста)

[@АлександрРусалеев-о8г]

Очень жду обещанный марафон по насадке на CMS!

[@maxgraph]

Уже в работе) в феврале должен быть.

[@sergeylebed1382]

Спасибо вам огромное за ваше объяснение, всё срабатывает на все 100%!!!

[@maxgraph]

Отлично)

[@ВладимирЯрошенко-л6э]

Максим, спасибо за материал! Очень полезно, все по делу и без лишней воды! Не останавливайся, продолжай, ты нас мотивируешь 💪 Всего тебе хорошего!🙏

[@maxgraph]

Спасибо))

[@mini8622]

Спасибо большое за полезную и нужную информацию!

[@maxgraph]

Пожалуйста)

[@aplemakhbros]

Отличный лайфхак с позиционированием текста ошибки justvalidate сверху - я лично морочился именно с position, чтобы этого добиться и до display:flex+flex-direction:column-reverse не допер. Спасибо за приемчик😎

[@maxgraph]

Пожалуйста)

[@helworldd]

Хм, что за магия. 1-2 дня назад в планах задумал верстать новый сайт для портфолио и решил на нём научиться делать отправку форм на почту. Сегодня зашёл просто в рекомендации и сразу увидел это видео, при чём обратил внимание на дату релиза, оно свежее, 5 дней назад сделанное.

[@maxgraph]

Алгоритмы ютуба))

[@sergeyvyzolmirskiy7305]

Спасибо тебе большое за гайд! Наконец то смогу делать полноценные отправки формы😇

[@maxgraph]

Пожалуйста)

[@alexdoronin9803]

Максим, спасибо большое за материалы, очень доступно и понятно! Но конкретно на этом видео у меня возникла проблема, сделал все по видео, с гита вашего копировал код, вставил свой мэйл и пароль, но почему то на почту не приходят данные? может есть частые ошибки в этом? в консоли ошибок нет, когда нажимаешь отправить, в консоли выводит что отправленно

[@ФранцузРусский-ы2ш]

Как всегда, КРАСАВА + лайк!!!!

[@maxgraph]

Спасибо)

[@Zak0532]

Как всегда держишь планку. Спасибо!)

[@maxgraph]

Пожалуйста)

[@dimaburichin7726]

Спасибо! Хороший контент!

[@deniseagle]

Супер, как всегда качественно и полезно. Спасибо за ваш труд.

[@maxgraph]

Спасибо))

[@peterpopov5925]

Здравствуйте, благодарю вас за то что снимаете такой добротный материал. А как отменить валидацию или очистить всю форму при закрытии попапа

[@maxgraph]

Очистка формы через reset() делается

[@olgareschetilo3253]

Спасибо за урок Максим! Подскажите пожалуйста, в чем может быт причина ошибки 500 (Internal Server Error)? Я тестировала через локальный сервер MAMP.

[@maxgraph]

Как раз из-за локального сервера, скорее всего

[@tr4gger]

у меня такая же проблема, при том что все на хостинге. Если есть решение, то какое?

[@daulettulepbergenov9151]

Спасибо за видео! вы лучший!

[@maxgraph]

Спасибо)

[@dmitryg.9533]

Великий человек!...Спасибо

[@maxgraph]

Пожалуйста =

[@Web-Hitch]

Класс! Было бы еще круче если бы в телеграмм приходило тоже

[@maxgraph]

Отдельное видео про это есть)

[@Web-Hitch]

@@maxgraph Ооо не видел можно ссылку на видео пожалуйста мне казалось я все пересмотрел на вашем канале))

[@gladiatorrussia]

Максим, а можно сделать так, что-бы ошибки о незаполненных полях появлялись в самих полях вместо плейсхолдера? это возможно реализовать с этими плагинами?

[@maxgraph]

Вместо него нет, можно только разместить элемент на месте плейсхолдера с помощью позишн

[@gladiatorrussia]

@@maxgraph это да, но тогда сообщение будет залазить на маску телефона)

[@gladiatorrussia]

Разобрался, заказчик требовательный попался. Напишу, вдруг тебе пригодится. Через позишн/трансформ двигаем наверх и задаем задний фон и тд, что-бы перебивать плейсхолдер от инпута. А при ховере/фокусе на инпут убираем поле с ошибкой. Вроде красиво получилось

[@СергейГадаев-у5н]

Благодарочка!

[@maxgraph]

👍

[@ObsidianHeart666]

Помогите пожалуйста, создаю уже 4 форму и постоянно вижу ошибку POST 500 INTERNAL SERVER ERROR xhr.send(formData);

[@maxgraph]

Опечатка где-то в php, скорее всего

[@ObsidianHeart666]

@@maxgraph я уже скопировал готовую сборку, ввел свой логин и пароль и все равно выдает ошибку. Я думаю проблема с паролем.

[@grigory_bo1kov]

@@ObsidianHeart666нужно не с локального хоста запускать

[@МихаилЖуравлев-э3с]

Годнота подъехала

[@maxgraph]

Хех))

[@denisgerc6735]

Максим добрый вечер! Очень пригодился твой урок, спасибо от души!!! Подскажи пожалуйста, как добавить класс для pop-up окна когда успешно пройдена валидация? В прошлой версии just-validate ты показывал как добавить классы для отслеживания метрики яндекса и попап после отправки, а в новой версии я не увидел этого, а так хотелось бы) плиз! Я правильно понимаю, что можно вот в эту часть кода добавить, где написано ... onSuccess((event) => {....}?

[@maxgraph]

да, все так)

[@СтаниславГорячев-г1ъ]

спасибо, очень полезно

[@maxgraph]

Отлично)

[@mushnikov35]

Все круто !

[@maxgraph]

Спасибо)

[@Альберт-з9д]

А если несколько форм на сайте, как быть ?

[@gvitoss]

Редко ставлю лайки, но тут не удержался

[@maxgraph]

Спасибо)

[@tatiana5197]

Пока разобралась со старой версией, уже обновление вышло)) Так подробно и понятно всё рассказали, огромная благодарность!!! Пока сайт на хостинг не загружен модальное окно не появится при отправке правильно заполненных полей?

[@maxgraph]

Да, конечно, пост запрос просто не пройдёт)

[@PalyufishkuRuSite]

Максим, расшифруйте, пожалуйста момент в mail.php в блоке формирования письма у вас прописано условие. Если я правильно понял, там $key сравнивается с project_name, admin_email и form_subject. Откуда берутся эти project_name, admin_email и form_subject, с которыми идет сравнение?

[@maxgraph]

Это код с моего старого скрипта, в а принципе условие можно удалить. Раньше были такие поля)

[@PalyufishkuRuSite]

@@maxgraph Спасибо! )

[@АндрейИванов-щ8я7ы]

Все круто!) Есть вопрос Как добавить некий класс error тегу label как в случае с input ?

[@maxgraph]

Скорее всего никак

[@АндрейИванов-щ8я7ы]

@@maxgraph Спс за видео и за ответ. Это плохо ну да ладно.

[@АннаБекренева-я3ы]

Спасибо за полезный видосик) а подскажите, пожалуйста, какая у вас клавиатура?

[@maxgraph]

Пожалуйста) Anne pro 2

[@КаринаТрофимова-ч5з]

Спасибо!

[@maxgraph]

Пожалуйста)

[@АнтонОРТЗИ]

Добрый вечер! Подскажите, а можно зашифровать данные при отправке на почту?

[@maxgraph]

Добрый вечер! А что и зачем нужно шифровать? они и так нигде не засветятся

[@АнтонОРТЗИ]

@@maxgraphЭто я не правильно проверил. Данные автоматом в tls шифруется, ничего делать не надо.

[@МихаилФадеев-и6ф]

В чем подвох? Год назад по этиму видео написал код - ВСЁ РАБОТАЛО. Проверил вчера этот же самый код - почта работает, но картинки не приходят (хотя в консоли они массивом отражаются)??? Опять что-то в плагине изменили??? :-(

[@maxgraph]

Скорее всего где-то опечатка :)

[@МихаилФадеев-и6ф]

@@maxgraph ОК, СПАСИБО за ответ - ещё раз перепроверю! Может перезатёр что-то, а глаз замылился и не видит... Ну, а как у тебя, Максим, всё работает как прежде???

[@Andrew-i5r]

Блгодарю за ваш полезный контент 🤝 А как можно выводить сообщения об ошибках не сверху, а снизу input?

[@maxgraph]

Через флекс можно обернув инпут в див

[@Andrew-i5r]

@@maxgraph Благодарю. И еще вопрос. Каким образом можно сделать "крестики" в любых полях для их очистки. Не одну кнопку для очищения всех полей формы сразу, а именно по отдельности для каждого поля? Перерыл весь интернет, но лаконичного решения не нашел... Был бы Вам очень признателен, если сможете раскрыть эту тему. Успехов вам во всех делах 🤝

[@deniseagle]

Готовая вёрстка на гитхаб ссылка не работает, поправьте пожалуйста

[@maxgraph]

Что с ней?

[@deniseagle]

@@maxgraph перекидывает на ошибку

[@ЮрийНосырев-х2е]

Добрый день. Может совсем тупой вопроc от новичка, но задам: А можно каким-либо образом скрыть пароль smtp в mail.php? или mail.php при загрузке файлов сайта на хостинг и так не будет видно? вопрос возник потому что обычные файлы index, js, css себе может любой пользователь твоего сайта скопировать.

[@maxgraph]

Добрый день. Php файлы не видны через браузер, их не скачать

[@PalyufishkuRuSite]

Максим, а если на странице сайта несколько форм, например, форма обратной связи и заказать звонок с разным набором полей для заполнения? Нужно будет давать формам разные классы и прописывать валидацию уже для этих разных форм? А обработчик форм, то есть mail.php для всех останется общим? Или для других форм нужно будет делать копию mail.php, чтобы у каждой формы был свой обработчик?

[@maxgraph]

Обработчик формы один, а классы да, разные.

[@nemo_aleexey4739]

Всем привет, почему письмо приходит но пустое(без данных которые ввели на сайте)?

[@nemo_aleexey4739]

Нашел ошибку, забыл добавить каждому инпуту и текстарии атрибут name

[@НикитаПолозов-я5ш]

Добрий день, на работает маска, как можно пофиксить, использую Parcel для сборки

[@maxgraph]

Возможно подключение плагин не так.

[@onese7en141]

а если у меня нет хостинга и домена а проверить работоспособность mail.php хочется, что делать? обязательно сначала купить их?

[@maxgraph]

Да

[@_Fantom_.]

Дружище, у меня почему-то письма не приходят на почту, хотя скрипт отрабатывает четко, и выводит сообщение "отправлено" в консоли. В чем может быть причина? Ни на gmail, ни на mail никакие письма не приходят, какую бы форму не делал.. Использую Open Server, который естественно настроил как положено..

[@maxgraph]

Так на хостинге надо

[@_Fantom_.]

@@maxgraph А через локальный сервер никак не получится что-ли?

[@РоманДоденко]

@@_Fantom_. net

[@igors7305]

У меня работает через Open Server. Версия 5.4.3. Почта Яндекс.

[@olegator500]

Как сделать, чтобы после отправки на почту, вылезало модальное окно с благодарностью? Помогите пожалуйста

[@maxgraph]

Смотря как сделано окно, не могу сказать

[@olegator500]

@@maxgraph у меня еще форма не работает при action="#", поменяла на action="mail.php",теперь форма отправляется, но почему-то не видит JustValidate

[@servera-center]

а если несколько телефонов на одной стр две формы

[@maxgraph]

Да просто дублировать код

[@servera-center]

@@maxgraph Просто с телефоном там проблемы не проверяет валидность

[@servera-center]

@@maxgraph нашёл правда варик, не знаю насколько он хорош .addField('.form-phone', [ { rule: 'required', errorMessage: 'Введите телефон!', }, { rule: 'customRegexp', value: /^(\+7|8)?\s?\(\d{3}\)\s?\d{3}-\d{2}-\d{2}$/, errorMessage: 'Введите корректный номер!', }, ])

[@servera-center]

а если мне надо не модальное окно, а класс?

[@maxgraph]

Добавляйте через classList

[@natalieroonee9867]

Добрый день. А как в обновленной версии just validate изменить цвет ошибок?

[@maxgraph]

Загляните в доку, нажмите ctrl+f и введите color)

[@slagrach]

Хай! Не пойму это у меня валидация телефона заканчивается на первой же цифре или так и задумано!?

[@maxgraph]

Не понял, как это)

[@slagrach]

@@maxgraph Вводишь одну цифру и все проверка прошла!

[@slagrach]

Ну что есть решение?

[@КристинаСажина-ц2ы]

Максим, а как сделать чтобы после отправки сообщение, всплывало окно об успешной отправки? 😱

[@maxgraph]

Зависит от вашей реализации самого окна)

[@olegator500]

Здравствуйте. Скажите пожалуйста, будет ли работать отправка формы без валидации?

[@maxgraph]

Здравствуйте. Ну если самому событие submit написать - будет

[@AntonVakulych]

Можете объяснить, где брать файл just-validate3.3.3.min.js? Что-то я не понял(((

[@maxgraph]

Я показал детально в видео) и ссылку под видео вложил

[@olekseenkoAndrey]

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

[@maxgraph]

Проверьте сперва, все ли в порядке с хостингом

[@user-Arvard]

Макс, Привет! подскажи пожалуйста, изза чего может приходить пустое письмо на почту ? :( всё проверил и перепроверил, код сверял много раз.... на старом варианте приходила таблица но с кривыми данными... на новом варианте письмо на почту приходит, НО пустое :(

[@user-Arvard]

хмм..... исправил свой же косяк.... почему-то всё таки не добавлял атрибуты name в инпуты.... всё сработало, отправилось, письмо пришло исправно ) спасибо за урок! )

[@maxgraph]

Пожалуйста)

[@alexr0v]

Но почему запрос к php файлу не через fetch и асинхронную функцию? Это же проще для понимания и гораздо современнее

[@maxgraph]

Кому как удобнее)

[@ЕкатеринаСинякова-у9е]

сижу реву...как сделать чтобы модальное окно всплывало после оправки формы? три дня уже мучаюсь(((

[@maxgraph]

Смотря какое окно

[@Robstik]

По умолчанию добавь окну display: none; а когда форма отправилась через JavaScript поменяй на display: block; и через setTimout поставь что бы менялось через 3 секунды обратно на none. Или добавь крестик окну на который окно закрывается. Если это актуально ещё

[@ИринаКравцова-п9п]

Добрый день. Попробовала применить ваш код на свой сайт,и увы письма на почту не доходят. Пробовала и mail и gmail.Подумала ,что наверно где я ошиблась,повторила весь ваш код,просто с копипастила и все равно письма не доходят на почту🤔уже всю голову сломала ...

[@ИринаКравцова-п9п]

При том ,что консоль ошибок не выдает

[@ИринаКравцова-п9п]

Такс,на вашем коде все заработала,причину нашла. А вот перенесла код на свой сайт ,выдает ошибку 500 и ссылается на JS на строчку xhr.send(formData). Подскажите ,в чем может быть ошибка ,сравнила все до запятой

[@maxgraph]

Ошибка 500 точно из-за опечатки в php

[@olekseenkoAndrey]

@@ИринаКравцова-п9п в чем была причина, подскажите пожалуйста, тоже не приходят письма на почту

[@ИринаКравцова-п9п]

@@olekseenkoAndrey посмотрите в консоль, если тоже ошибку 500 выдает,просто попробуйте скопировать код и вставить в файл обратно. Где то была опечатка,но визуально я ее так и не нашла,просто перезалила код.

[@PalyufishkuRuSite]

Максим, ссылка на готовую верстку ведет на 404 страницу

[@maxgraph]

Уже обновил) там лишний символ - был

[@efremandre]

интересно я когда нибудь найду тутор, где будут делать все без всяких библиотек? ( Это же все утяжеляет проект и появляется зависимость от кого-то

[@maxgraph]

А собственный код не будет утяжелять?) Да ещё и код, который напишете вы, точно будет хуже чем у тех, кто сделал библиотеку Придумывать велосипед нет смысла

[@ВикторКулагин-ь2у]

У меня этот плагин не заработал нормально вначале. Накатил самую свежую версию! Спасибо

[@gergeorg]

На сколько безопасно хранить этот пароль (от gmail) на хостинге?

[@maxgraph]

Ваш php-код никто не увидит, если не получит доступ к хостингу, так что проблем не будет Но что-то мне подсказывает что даже если узнают ваш код - это неважно)

[@ForeverDarkDeath]

если делать всё по-уму, то в gmail есть в настройках где-то пароль для приложений. т.е. будет у почты как-бы 2-3 разных пароля, один пользовательский основной (его можете менять спокойно) и отдельный резервный пароль для авторизации на сайте.

[@Озерный-е2д]

А можно это сделать в одном файле html

[@maxgraph]

Можно, но не нужно

[@wdfrghztjk]

input mask весит больше чем jquery...ужос !😬

[@ForeverDarkDeath]

Валидация на JS познавательная, но полностью бесполезная. На JS достаточно проверить наличие обязательных полей, а все логические условия нужно выполнять на сервере уже. Кстати, интересно, как этот Just-Validate подсвечивает некорректные поля если на них навешаны какие-то доп.обёртки типа STYLER'a SELECT или FILE ?! И сообщения про ошибки получается нужно для него дублировать в JS постоянно что бы были серверными идентичны.

[@maxgraph]

Для лендинга этого более чем достаточно

[@Данил-ю3ъ]

я походу один лох не смог сделать

[@igoraksenov2529]

а можно ли настроить алерт после отправки формы?

[@maxgraph]

Можно

[@ronsondavid1588]

Максим, ссылка на готовую верстку ведет на 404 страницу

[@maxgraph]

В самом конце ссылки удалите -

[@ronsondavid1588]

там нет - ссылка заканчивается B2%25202022

[@ronsondavid1588]

Спасибо скачал