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

  Рет қаралды 19,476

MaxGraph - cайты как страсть

MaxGraph - cайты как страсть

Күн бұрын

Привет!
В этой части ui-компонентов я покажу, как сделать валидацию формы и ее отправку на почту через SMTP (этот способ работает для отправки на любую почту без проблем).
Содержание:
00:00 - Интро
00:39 - Про версию JustValidate
01:35 - Про форму в html
02:39 - Делаем маску для телефона
05:15 - Начинаем валидацию
07:38 - Делаем правильную валидацию телефона
10:05 - Меняем подсказки на русский язык
12:31 - Располагаем ошибки над полями
13:10 - Меняем цвет ошибок
14:05 - Скачиваем phpmailer
15:10 - Разбираем php-скрипт
21:58 - Как создать пароль для SMTP
23:59 - Пишем ajax запрос к php-файлу
26:02 - Загружаем на хостинг и тестируем
github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
github.com/horprogs/Just-vali... - библиотека JustValidate (старая версия)
github.com/RobinHerbots/Input... - библиотека Inputmask
github.com/PHPMailer/PHPMailer - библиотека phpmailer
drive.google.com/file/d/19XTG... - дополнение к этому видео с новой версией плагина
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Для заказа верстки обращайтесь в телеграм @maxdenaro
#ityoutubersru #ui_компоненты #верстка

Пікірлер: 173
@maxgraph
@maxgraph 2 жыл бұрын
Друзья, записал небольшое обновление, т.к. новую версию плагина Just-Validate таки поправили) drive.google.com/file/d/19XTGYqh3RK6Fuc64dNATsc9hpQjYDFHs/view?usp=sharing
@user-vv3js2gf1v
@user-vv3js2gf1v 2 жыл бұрын
Что то отправка не идет на почту. Хотя в консоли пишет статус 200 и форма отправлена.
@alexshev7412
@alexshev7412 Жыл бұрын
Файлы на почте не отображаются (нет прикреплённых файлов), в чём причина может быть? Ошибок нет никаких...
@gordollodrog3186
@gordollodrog3186 2 жыл бұрын
Спасибо огромное за ваш обучающий контент. Не останавливаетесь не в коем случае))
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@sergeylebed1382
@sergeylebed1382 Жыл бұрын
Спасибо вам огромное за ваше объяснение, всё срабатывает на все 100%!!!
@maxgraph
@maxgraph Жыл бұрын
Отлично)
@mini8622
@mini8622 2 жыл бұрын
Спасибо большое за полезную и нужную информацию!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@kotofun
@kotofun Жыл бұрын
Огромное спасибо за это видео! Все по делу, ничего лишнего, все в итоге работает. Автору респект!
@maxgraph
@maxgraph Жыл бұрын
Спасибо)
@dimaburichin7726
@dimaburichin7726 2 жыл бұрын
Спасибо! Хороший контент!
@ggo_webdev
@ggo_webdev 2 жыл бұрын
Большое спасибо за такой понятный и очень подробный урок, все детали были расказаны а видео принесло очень крутое понимание процесса создания таких форм для отправки данных)
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-ni4kp5kw1e
@user-ni4kp5kw1e Жыл бұрын
Максим, спасибо за материал! Очень полезно, все по делу и без лишней воды! Не останавливайся, продолжай, ты нас мотивируешь 💪 Всего тебе хорошего!🙏
@maxgraph
@maxgraph Жыл бұрын
Спасибо))
@rvitalia1
@rvitalia1 Жыл бұрын
От всей души спасибо. Впервые форма которая работает....и спасибо за обновленный код на гит хабе...Долго крутился со старым кодом, плюнул уже...а потом увидел на гите волшебные слова, что обновлено под новую версию....и чудо, все заработало.... Рад что когда-то давно наткнулся на ваш канал...не раз уже выручал.. Спасибо!!!
@user-bp9yg9cj9j
@user-bp9yg9cj9j 2 жыл бұрын
Как всегда, КРАСАВА + лайк!!!!
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@sergeyvyzolmirskiy7305
@sergeyvyzolmirskiy7305 Жыл бұрын
Спасибо тебе большое за гайд! Наконец то смогу делать полноценные отправки формы😇
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@Zak0532
@Zak0532 Жыл бұрын
Как всегда держишь планку. Спасибо!)
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@daulettulepbergenov9151
@daulettulepbergenov9151 2 жыл бұрын
Спасибо за видео! вы лучший!
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@begineras
@begineras 2 жыл бұрын
за такой полезный контент так мало лайков, дружище респект тебе
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо))
@dexterholland4430
@dexterholland4430 2 жыл бұрын
Давно тебя смотрю, очень помогаешь во многих моментах. Незаслуженное количество подписчиков, считаю, что ты достоин намного большего! Отличная подача, максимально емкое и без воды изложение рассматриваемой темы. Продолжай и дальше в том же духе. Огромное спасибо!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@dmitryg.9533
@dmitryg.9533 2 жыл бұрын
Великий человек!...Спасибо
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста =
@ildarakhmerov4803
@ildarakhmerov4803 2 жыл бұрын
Спасибо большое, добрый человек! Наконец форма, которая работает! "Прикрутил" ее к модальному окну, добавил закрытие и оповещение об успешной отправке. То, что искал.
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@ObsidianHeart666
@ObsidianHeart666 2 жыл бұрын
Можешь пожалуйста скинуть mail.php без пароля, у меня почему то не получается, выдает 500 статус не пойму где ошибка(
@olegator500
@olegator500 2 жыл бұрын
Можешь пожалуйста показать, как прикрутил к модальному окну
@user-du6ns4ww6o
@user-du6ns4ww6o 2 жыл бұрын
Вот прям как я и хотел, Максим спасибо вам что читаете коментарии.
@maxgraph
@maxgraph 2 жыл бұрын
Рад помочь) пожалуйста)
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 жыл бұрын
Супер, как всегда качественно и полезно. Спасибо за ваш труд.
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо))
@user-mb5cy5lc9w
@user-mb5cy5lc9w 2 жыл бұрын
Годнота подъехала
@maxgraph
@maxgraph 2 жыл бұрын
Хех))
@user-mv1dg9fg5m
@user-mv1dg9fg5m 2 жыл бұрын
Благодарочка!
@maxgraph
@maxgraph 2 жыл бұрын
👍
@mushnikov35
@mushnikov35 2 жыл бұрын
Все круто !
@maxgraph
@maxgraph 2 жыл бұрын
Спасибо)
@user-lm9ee1gn5p
@user-lm9ee1gn5p Жыл бұрын
спасибо, очень полезно
@maxgraph
@maxgraph Жыл бұрын
Отлично)
@wilezar4835
@wilezar4835 2 жыл бұрын
Спасибо за видео) p.s. если кто делает через яндекс почту, то тогда надо включить на почте imap(почта --> настройки --> почтовые программы). И там где $mail->Username вводить именно логин, а не адрес почты
@aplemakhbros
@aplemakhbros Жыл бұрын
Отличный лайфхак с позиционированием текста ошибки justvalidate сверху - я лично морочился именно с position, чтобы этого добиться и до display:flex+flex-direction:column-reverse не допер. Спасибо за приемчик😎
@maxgraph
@maxgraph Жыл бұрын
Пожалуйста)
@user-je1mf9ih8n
@user-je1mf9ih8n 2 жыл бұрын
Очень жду обещанный марафон по насадке на CMS!
@maxgraph
@maxgraph 2 жыл бұрын
Уже в работе) в феврале должен быть.
@user-et2if6gt7x
@user-et2if6gt7x 2 жыл бұрын
Спасибо!
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@user-nj1dh5qf4b
@user-nj1dh5qf4b 2 жыл бұрын
Класс! Было бы еще круче если бы в телеграмм приходило тоже
@maxgraph
@maxgraph 2 жыл бұрын
Отдельное видео про это есть)
@user-nj1dh5qf4b
@user-nj1dh5qf4b 2 жыл бұрын
@@maxgraph Ооо не видел можно ссылку на видео пожалуйста мне казалось я все пересмотрел на вашем канале))
@gvitoss
@gvitoss Жыл бұрын
Редко ставлю лайки, но тут не удержался
@maxgraph
@maxgraph Жыл бұрын
Спасибо)
@kotofun
@kotofun Жыл бұрын
Максим, я пользуюсь Вашей gulp-сборкой уже несколько месяцев и не могу нарадоваться. Все отлично работает, все удобно, быстро и продуктивно. Лишь одна, пока нерешенная проблема немного печалит. Почему-то, не пойму по какой причине, некоторые js-библиотеки (их немного, но они есть), которые я подключаю к текущему проекту, помещая их в папку /vendor/ отказываются работать. Например, я использую библиотеку GSAP (для анимации элементов на странице сайта). Сама библиотека и большинство плагинов к ней подключаются (через vendor) без проблем и прекрасно работают. Но некоторые плагины при таком подключении выдают ошибку и работать не хотят. Кстати, если их подключать непосредственно в index.html через тег , то некоторые из них работают нормально. Почему так происходит понять не могу. Может быть Вы подскажете? Буду благодарен. Заранее спасибо.
@maxgraph
@maxgraph Жыл бұрын
Здравствуйте. Через эту папку никак не подключить js, надо бы её снести. Всё библиотеки только через npm
@helworldd
@helworldd 2 жыл бұрын
Хм, что за магия. 1-2 дня назад в планах задумал верстать новый сайт для портфолио и решил на нём научиться делать отправку форм на почту. Сегодня зашёл просто в рекомендации и сразу увидел это видео, при чём обратил внимание на дату релиза, оно свежее, 5 дней назад сделанное.
@maxgraph
@maxgraph 2 жыл бұрын
Алгоритмы ютуба))
@PalyufishkuRuSite
@PalyufishkuRuSite 2 жыл бұрын
Максим, а если на странице сайта несколько форм, например, форма обратной связи и заказать звонок с разным набором полей для заполнения? Нужно будет давать формам разные классы и прописывать валидацию уже для этих разных форм? А обработчик форм, то есть mail.php для всех останется общим? Или для других форм нужно будет делать копию mail.php, чтобы у каждой формы был свой обработчик?
@maxgraph
@maxgraph 2 жыл бұрын
Обработчик формы один, а классы да, разные.
@tatiana5197
@tatiana5197 2 жыл бұрын
Пока разобралась со старой версией, уже обновление вышло)) Так подробно и понятно всё рассказали, огромная благодарность!!! Пока сайт на хостинг не загружен модальное окно не появится при отправке правильно заполненных полей?
@maxgraph
@maxgraph 2 жыл бұрын
Да, конечно, пост запрос просто не пройдёт)
@user-ev7vm2yl6e
@user-ev7vm2yl6e 2 жыл бұрын
Спасибо за полезный видосик) а подскажите, пожалуйста, какая у вас клавиатура?
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста) Anne pro 2
@peterpopov5925
@peterpopov5925 Жыл бұрын
Здравствуйте, благодарю вас за то что снимаете такой добротный материал. А как отменить валидацию или очистить всю форму при закрытии попапа
@maxgraph
@maxgraph Жыл бұрын
Очистка формы через reset() делается
@denisgerc6735
@denisgerc6735 Жыл бұрын
Максим добрый вечер! Очень пригодился твой урок, спасибо от души!!! Подскажи пожалуйста, как добавить класс для pop-up окна когда успешно пройдена валидация? В прошлой версии just-validate ты показывал как добавить классы для отслеживания метрики яндекса и попап после отправки, а в новой версии я не увидел этого, а так хотелось бы) плиз! Я правильно понимаю, что можно вот в эту часть кода добавить, где написано ... onSuccess((event) => {....}?
@maxgraph
@maxgraph Жыл бұрын
да, все так)
@PalyufishkuRuSite
@PalyufishkuRuSite 2 жыл бұрын
Максим, расшифруйте, пожалуйста момент в mail.php в блоке формирования письма у вас прописано условие. Если я правильно понял, там $key сравнивается с project_name, admin_email и form_subject. Откуда берутся эти project_name, admin_email и form_subject, с которыми идет сравнение?
@maxgraph
@maxgraph 2 жыл бұрын
Это код с моего старого скрипта, в а принципе условие можно удалить. Раньше были такие поля)
@PalyufishkuRuSite
@PalyufishkuRuSite 2 жыл бұрын
@@maxgraph Спасибо! )
@olgareschetilo3253
@olgareschetilo3253 Жыл бұрын
Спасибо за урок Максим! Подскажите пожалуйста, в чем может быт причина ошибки 500 (Internal Server Error)? Я тестировала через локальный сервер MAMP.
@maxgraph
@maxgraph Жыл бұрын
Как раз из-за локального сервера, скорее всего
@tr4gger
@tr4gger Жыл бұрын
у меня такая же проблема, при том что все на хостинге. Если есть решение, то какое?
@user-iq3vi6bm8j
@user-iq3vi6bm8j 2 жыл бұрын
Все круто!) Есть вопрос Как добавить некий класс error тегу label как в случае с input ?
@maxgraph
@maxgraph 2 жыл бұрын
Скорее всего никак
@user-iq3vi6bm8j
@user-iq3vi6bm8j 2 жыл бұрын
@@maxgraph Спс за видео и за ответ. Это плохо ну да ладно.
@Andrew-nm1yl
@Andrew-nm1yl 2 жыл бұрын
Блгодарю за ваш полезный контент 🤝 А как можно выводить сообщения об ошибках не сверху, а снизу input?
@maxgraph
@maxgraph 2 жыл бұрын
Через флекс можно обернув инпут в див
@Andrew-nm1yl
@Andrew-nm1yl 2 жыл бұрын
@@maxgraph Благодарю. И еще вопрос. Каким образом можно сделать "крестики" в любых полях для их очистки. Не одну кнопку для очищения всех полей формы сразу, а именно по отдельности для каждого поля? Перерыл весь интернет, но лаконичного решения не нашел... Был бы Вам очень признателен, если сможете раскрыть эту тему. Успехов вам во всех делах 🤝
@user-rg8wz2rt9e
@user-rg8wz2rt9e Жыл бұрын
У меня этот плагин не заработал нормально вначале. Накатил самую свежую версию! Спасибо
@gladiatorrussia
@gladiatorrussia Жыл бұрын
Максим, а можно сделать так, что-бы ошибки о незаполненных полях появлялись в самих полях вместо плейсхолдера? это возможно реализовать с этими плагинами?
@maxgraph
@maxgraph Жыл бұрын
Вместо него нет, можно только разместить элемент на месте плейсхолдера с помощью позишн
@gladiatorrussia
@gladiatorrussia Жыл бұрын
@@maxgraph это да, но тогда сообщение будет залазить на маску телефона)
@gladiatorrussia
@gladiatorrussia Жыл бұрын
Разобрался, заказчик требовательный попался. Напишу, вдруг тебе пригодится. Через позишн/трансформ двигаем наверх и задаем задний фон и тд, что-бы перебивать плейсхолдер от инпута. А при ховере/фокусе на инпут убираем поле с ошибкой. Вроде красиво получилось
@olegator500
@olegator500 2 жыл бұрын
Здравствуйте. Скажите пожалуйста, будет ли работать отправка формы без валидации?
@maxgraph
@maxgraph 2 жыл бұрын
Здравствуйте. Ну если самому событие submit написать - будет
@user-du6jt5of9e
@user-du6jt5of9e Жыл бұрын
Добрый день. Может совсем тупой вопроc от новичка, но задам: А можно каким-либо образом скрыть пароль smtp в mail.php? или mail.php при загрузке файлов сайта на хостинг и так не будет видно? вопрос возник потому что обычные файлы index, js, css себе может любой пользователь твоего сайта скопировать.
@maxgraph
@maxgraph Жыл бұрын
Добрый день. Php файлы не видны через браузер, их не скачать
@user-on6lf2nz1v
@user-on6lf2nz1v Жыл бұрын
Добрий день, на работает маска, как можно пофиксить, использую Parcel для сборки
@maxgraph
@maxgraph Жыл бұрын
Возможно подключение плагин не так.
@natalieroonee9867
@natalieroonee9867 Жыл бұрын
Добрый день. А как в обновленной версии just validate изменить цвет ошибок?
@maxgraph
@maxgraph Жыл бұрын
Загляните в доку, нажмите ctrl+f и введите color)
@onese7en141
@onese7en141 Жыл бұрын
а если у меня нет хостинга и домена а проверить работоспособность mail.php хочется, что делать? обязательно сначала купить их?
@maxgraph
@maxgraph Жыл бұрын
Да
@PalyufishkuRuSite
@PalyufishkuRuSite 2 жыл бұрын
Максим, ссылка на готовую верстку ведет на 404 страницу
@maxgraph
@maxgraph 2 жыл бұрын
Уже обновил) там лишний символ - был
@nemo_aleexey4739
@nemo_aleexey4739 Жыл бұрын
Всем привет, почему письмо приходит но пустое(без данных которые ввели на сайте)?
@nemo_aleexey4739
@nemo_aleexey4739 Жыл бұрын
Нашел ошибку, забыл добавить каждому инпуту и текстарии атрибут name
@user-tg5kb4mn9p
@user-tg5kb4mn9p 6 ай бұрын
Добрый вечер! Подскажите, а можно зашифровать данные при отправке на почту?
@maxgraph
@maxgraph 6 ай бұрын
Добрый вечер! А что и зачем нужно шифровать? они и так нигде не засветятся
@user-tg5kb4mn9p
@user-tg5kb4mn9p 6 ай бұрын
@@maxgraphЭто я не правильно проверил. Данные автоматом в tls шифруется, ничего делать не надо.
@user-yk2pu3ix2t
@user-yk2pu3ix2t 4 ай бұрын
А если несколько форм на сайте, как быть ?
@user-nz6ww3jm1k
@user-nz6ww3jm1k Жыл бұрын
Максим, а как сделать чтобы после отправки сообщение, всплывало окно об успешной отправки? 😱
@maxgraph
@maxgraph Жыл бұрын
Зависит от вашей реализации самого окна)
@user-jv6gf8tf3e
@user-jv6gf8tf3e 2 жыл бұрын
Можете объяснить, где брать файл just-validate3.3.3.min.js? Что-то я не понял(((
@maxgraph
@maxgraph 2 жыл бұрын
Я показал детально в видео) и ссылку под видео вложил
@user-Arvard
@user-Arvard 2 жыл бұрын
Макс, Привет! подскажи пожалуйста, изза чего может приходить пустое письмо на почту ? :( всё проверил и перепроверил, код сверял много раз.... на старом варианте приходила таблица но с кривыми данными... на новом варианте письмо на почту приходит, НО пустое :(
@user-Arvard
@user-Arvard 2 жыл бұрын
хмм..... исправил свой же косяк.... почему-то всё таки не добавлял атрибуты name в инпуты.... всё сработало, отправилось, письмо пришло исправно ) спасибо за урок! )
@maxgraph
@maxgraph 2 жыл бұрын
Пожалуйста)
@ObsidianHeart666
@ObsidianHeart666 2 жыл бұрын
Помогите пожалуйста, создаю уже 4 форму и постоянно вижу ошибку POST 500 INTERNAL SERVER ERROR xhr.send(formData);
@maxgraph
@maxgraph 2 жыл бұрын
Опечатка где-то в php, скорее всего
@ObsidianHeart666
@ObsidianHeart666 2 жыл бұрын
@@maxgraph я уже скопировал готовую сборку, ввел свой логин и пароль и все равно выдает ошибку. Я думаю проблема с паролем.
@crypto_bulletin_news
@crypto_bulletin_news Жыл бұрын
@@ObsidianHeart666нужно не с локального хоста запускать
@olekseenkoAndrey
@olekseenkoAndrey Жыл бұрын
Не приходят письма почему то, ошибок в консоли нет(
@maxgraph
@maxgraph Жыл бұрын
Проверьте сперва, все ли в порядке с хостингом
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 жыл бұрын
Готовая вёрстка на гитхаб ссылка не работает, поправьте пожалуйста
@maxgraph
@maxgraph 2 жыл бұрын
Что с ней?
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 жыл бұрын
@@maxgraph перекидывает на ошибку
@olegator500
@olegator500 2 жыл бұрын
Как сделать, чтобы после отправки на почту, вылезало модальное окно с благодарностью? Помогите пожалуйста
@maxgraph
@maxgraph 2 жыл бұрын
Смотря как сделано окно, не могу сказать
@olegator500
@olegator500 2 жыл бұрын
@@maxgraph у меня еще форма не работает при action="#", поменяла на action="mail.php",теперь форма отправляется, но почему-то не видит JustValidate
@efremandre
@efremandre Жыл бұрын
интересно я когда нибудь найду тутор, где будут делать все без всяких библиотек? ( Это же все утяжеляет проект и появляется зависимость от кого-то
@maxgraph
@maxgraph Жыл бұрын
А собственный код не будет утяжелять?) Да ещё и код, который напишете вы, точно будет хуже чем у тех, кто сделал библиотеку Придумывать велосипед нет смысла
@gergeorg
@gergeorg 2 жыл бұрын
На сколько безопасно хранить этот пароль (от gmail) на хостинге?
@maxgraph
@maxgraph 2 жыл бұрын
Ваш php-код никто не увидит, если не получит доступ к хостингу, так что проблем не будет Но что-то мне подсказывает что даже если узнают ваш код - это неважно)
@ForeverDarkDeath
@ForeverDarkDeath 2 жыл бұрын
если делать всё по-уму, то в gmail есть в настройках где-то пароль для приложений. т.е. будет у почты как-бы 2-3 разных пароля, один пользовательский основной (его можете менять спокойно) и отдельный резервный пароль для авторизации на сайте.
@user-me7pk5tg1u
@user-me7pk5tg1u Жыл бұрын
А можно это сделать в одном файле html
@maxgraph
@maxgraph Жыл бұрын
Можно, но не нужно
@_Fantom_.
@_Fantom_. Жыл бұрын
Дружище, у меня почему-то письма не приходят на почту, хотя скрипт отрабатывает четко, и выводит сообщение "отправлено" в консоли. В чем может быть причина? Ни на gmail, ни на mail никакие письма не приходят, какую бы форму не делал.. Использую Open Server, который естественно настроил как положено..
@maxgraph
@maxgraph Жыл бұрын
Так на хостинге надо
@_Fantom_.
@_Fantom_. Жыл бұрын
@@maxgraph А через локальный сервер никак не получится что-ли?
@user-uz9rz8uy2h
@user-uz9rz8uy2h Жыл бұрын
@@_Fantom_. net
@igors7305
@igors7305 3 ай бұрын
У меня работает через Open Server. Версия 5.4.3. Почта Яндекс.
@user-kc8ft5tz8l
@user-kc8ft5tz8l Жыл бұрын
В чем подвох? Год назад по этиму видео написал код - ВСЁ РАБОТАЛО. Проверил вчера этот же самый код - почта работает, но картинки не приходят (хотя в консоли они массивом отражаются)??? Опять что-то в плагине изменили??? :-(
@maxgraph
@maxgraph Жыл бұрын
Скорее всего где-то опечатка :)
@user-kc8ft5tz8l
@user-kc8ft5tz8l Жыл бұрын
@@maxgraph ОК, СПАСИБО за ответ - ещё раз перепроверю! Может перезатёр что-то, а глаз замылился и не видит... Ну, а как у тебя, Максим, всё работает как прежде???
@servera-center
@servera-center 8 ай бұрын
а если мне надо не модальное окно, а класс?
@maxgraph
@maxgraph 8 ай бұрын
Добавляйте через classList
@alexr0v
@alexr0v Жыл бұрын
Но почему запрос к php файлу не через fetch и асинхронную функцию? Это же проще для понимания и гораздо современнее
@maxgraph
@maxgraph Жыл бұрын
Кому как удобнее)
@user-wx8tz3ic9j
@user-wx8tz3ic9j Жыл бұрын
сижу реву...как сделать чтобы модальное окно всплывало после оправки формы? три дня уже мучаюсь(((
@maxgraph
@maxgraph Жыл бұрын
Смотря какое окно
@Robstik
@Robstik Жыл бұрын
По умолчанию добавь окну display: none; а когда форма отправилась через JavaScript поменяй на display: block; и через setTimout поставь что бы менялось через 3 секунды обратно на none. Или добавь крестик окну на который окно закрывается. Если это актуально ещё
@slagrach
@slagrach Жыл бұрын
Хай! Не пойму это у меня валидация телефона заканчивается на первой же цифре или так и задумано!?
@maxgraph
@maxgraph Жыл бұрын
Не понял, как это)
@slagrach
@slagrach Жыл бұрын
@@maxgraph Вводишь одну цифру и все проверка прошла!
@slagrach
@slagrach Жыл бұрын
Ну что есть решение?
@servera-center
@servera-center 11 ай бұрын
а если несколько телефонов на одной стр две формы
@maxgraph
@maxgraph 11 ай бұрын
Да просто дублировать код
@servera-center
@servera-center 11 ай бұрын
@@maxgraph Просто с телефоном там проблемы не проверяет валидность
@servera-center
@servera-center 11 ай бұрын
@@maxgraph нашёл правда варик, не знаю насколько он хорош .addField('.form-phone', [ { rule: 'required', errorMessage: 'Введите телефон!', }, { rule: 'customRegexp', value: /^(\+7|8)?\s?\(\d{3}\)\s?\d{3}-\d{2}-\d{2}$/, errorMessage: 'Введите корректный номер!', }, ])
@wdfrghztjk
@wdfrghztjk Жыл бұрын
input mask весит больше чем jquery...ужос !😬
@user-lb4kz4nm1o
@user-lb4kz4nm1o Жыл бұрын
Добрый день. Попробовала применить ваш код на свой сайт,и увы письма на почту не доходят. Пробовала и mail и gmail.Подумала ,что наверно где я ошиблась,повторила весь ваш код,просто с копипастила и все равно письма не доходят на почту🤔уже всю голову сломала ...
@user-lb4kz4nm1o
@user-lb4kz4nm1o Жыл бұрын
При том ,что консоль ошибок не выдает
@user-lb4kz4nm1o
@user-lb4kz4nm1o Жыл бұрын
Такс,на вашем коде все заработала,причину нашла. А вот перенесла код на свой сайт ,выдает ошибку 500 и ссылается на JS на строчку xhr.send(formData). Подскажите ,в чем может быть ошибка ,сравнила все до запятой
@maxgraph
@maxgraph Жыл бұрын
Ошибка 500 точно из-за опечатки в php
@olekseenkoAndrey
@olekseenkoAndrey Жыл бұрын
@@user-lb4kz4nm1o в чем была причина, подскажите пожалуйста, тоже не приходят письма на почту
@user-lb4kz4nm1o
@user-lb4kz4nm1o Жыл бұрын
@@olekseenkoAndrey посмотрите в консоль, если тоже ошибку 500 выдает,просто попробуйте скопировать код и вставить в файл обратно. Где то была опечатка,но визуально я ее так и не нашла,просто перезалила код.
@ForeverDarkDeath
@ForeverDarkDeath 2 жыл бұрын
Валидация на JS познавательная, но полностью бесполезная. На JS достаточно проверить наличие обязательных полей, а все логические условия нужно выполнять на сервере уже. Кстати, интересно, как этот Just-Validate подсвечивает некорректные поля если на них навешаны какие-то доп.обёртки типа STYLER'a SELECT или FILE ?! И сообщения про ошибки получается нужно для него дублировать в JS постоянно что бы были серверными идентичны.
@maxgraph
@maxgraph 2 жыл бұрын
Для лендинга этого более чем достаточно
@user-fs5sl8pr6z
@user-fs5sl8pr6z Жыл бұрын
я походу один лох не смог сделать
@igoraksenov2529
@igoraksenov2529 Жыл бұрын
а можно ли настроить алерт после отправки формы?
@maxgraph
@maxgraph Жыл бұрын
Можно
@ronsondavid1588
@ronsondavid1588 2 жыл бұрын
Максим, ссылка на готовую верстку ведет на 404 страницу
@maxgraph
@maxgraph 2 жыл бұрын
В самом конце ссылки удалите -
@ronsondavid1588
@ronsondavid1588 2 жыл бұрын
там нет - ссылка заканчивается B2%25202022
@ronsondavid1588
@ronsondavid1588 2 жыл бұрын
Спасибо скачал
UI-компоненты №14. Простое бургер-меню
29:14
MaxGraph - cайты как страсть
Рет қаралды 13 М.
Валидация формы на чистом Javascript
34:01
Александр Дудукало
Рет қаралды 28 М.
Wait for the last one! 👀
00:28
Josh Horton
Рет қаралды 129 МЛН
Сеть и сокеты. База для backend разработчика.
17:11
Константин Козловский
Рет қаралды 40 М.
Парсим админку Мегамаркета с помощью скрытых API
30:56
Алексей Куличевский
Рет қаралды 48 М.
Автоматизация создания React-компонентов
14:36
Михаил Непомнящий
Рет қаралды 20 М.
UI-компоненты №15. Кнопка "показать еще"
10:54
MaxGraph - cайты как страсть
Рет қаралды 12 М.
37 ошибок верстальщиков. Не делай так!
44:50
MaxGraph - cайты как страсть
Рет қаралды 55 М.
Отправка заявки на почту. От верстки до письма на почте
56:51