JS-плагины №4. Валидация и отправка формы + отправка файла

[@redblueedge]

Я просто в шоке от того, насколько полезное это видео. Спасибо огромное 👍🏿

[@maxgraph]

Еее)

[@vfat5371]

Автор! Да вы просто золотой Человек! Вы этим уроком очень меня выручили. Здоровья Вам и удачи в делах! 🤝

[@maxgraph]

Спасибо) и вам удачи)

[@АнастасияТитова-в1ю]

Очень полезное видео, как, впрочем, и остальной контент! Спасибо вам!👍

[@maxgraph]

Спасибо))

[@erega74]

Поставил сотый лайк👍, контент просто огонь, и объясняешь зачетно Максим

[@maxgraph]

Спасибо!)

[@dis1755]

Актуально 👍

[@vzrosly_muzik]

Видео - золото! Больше лайков, ребят!

[@maxgraph]

Спасибо)

[@summersbyy]

Крутое видео, много полезного!)

[@maxgraph]

Спасибо)

[@alberoforte6816]

Супер!!! Где же ты раньше был?))

[@maxgraph]

Не знаю))

[@MrEmil-cf8wo]

Блин как раз это и искал,красавчик!

[@maxgraph]

Спасибо)

[@arzamaskin_kirill]

спасибо. Спустя часы понял, в чем ошибка у меня была)

[@КонстантинВолобуев-э5х]

Спасибо, сегодня-завтра все доделаю)

[@АндрейАристов-ы5х]

👍👍👍удачи братулек

[@maxgraph]

Спасибо)

[@zeleboba1398]

Огромное спасибо! Многое понял)

[@maxgraph]

пожалуйста)

[@dzmitryk7546]

Обожаю тебя

[@ii-yj5qj]

Массив Емэйлов к доске!

[@dimalepel]

Спасибо за урок. Оказался полезным. Подскажите, как в контексте Вашей функции сделать локализацию служебных сообщений. Самостоятельно не смог разобраться. Заранее благодарен.

[@tovjukov]

Видео крутое.

[@Sergey_Klimov]

Ну, как обычно документация поможет только тем, кто уже умеет с плагином работать

[@maxgraph]

С чего вдруг?) там все подробно показано, все настройки. Любой, кто работал с любой библиотекой, разберётся при желании

[@Sergey_Klimov]

@@maxgraph да. Любой, кто работал. Я так и сказал

[@maxgraph]

Ну у вас все же другой смысл

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

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

[@okireev]

Очень много полезной информации, спасибо огромное! Попробовал применить inputmask, сделал все как ты: взял JS (точно не jQuery) вариант плагина (пробовал и минифцированный, и обычный), и при попытке применить метод mask(); компилятор ругается: // Uncaught ReferenceError: $ is not defined. Насколько я знаю это переменная из jQuery, почему он пытается найти ее в версии для ванильного JS я понять не смог. Поделитесь пожалуйста советом, что я делают не так?

[@maxgraph]

В идеале бы посмотреть, не могу сразу ответить

[@asgard1428]

Максим привет! Подскажи пожалуйста, если нет телефона в форме, что тогда передавать в переменную validateForms вместо selector первым параметром?

[@maxgraph]

Я бы посмотрел новую версию видео) в ui компонентах

[@asgard1428]

@@maxgraph уже в чате разобрались Максим, ты ответил уже))Спасибо!

[@ligaarrow3460]

Вопрос в том, что а есть ли возможность запускать just-validate , не по событию submit при нажатии кнопки, а например сделать при событии blur?

[@maxgraph]

Думаю что нет

[@svet0v]

А не подскажешь, какие хостинги лучше использовать?

[@maxgraph]

Да любой, который подходит по цене. Я пользуюсь fornex - устраивает)

[@radnet12]

Спасибо за ценную информацию!) Очень много узнал по Вашим роликам!) Хочу задать один вопрос, на сайте есть несколько форм, все формы отправляются отлично, кроме той где есть тег select с option , везде name и value прописал, но именно эту форму не отправляет и в консоле выдает ошибку "Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement", можете подсказать, что делать в таком случае, или ошибка где-то у меня в коде? Если нужна будет дополнительная информация, могу ли я Вам её прислать, чтобы решить проблему?) Заранее спасибо большое!)

[@maxgraph]

Здравствуйте, можете скинуть в телеграм или вк)

[@super_snejinka]

содержимое плагина just validate стало совсем другое, ничего толком не понимаю) так что качаю с вашего гита min.js, и тогда уже с помощью вашего видео получается модифицировать валидацию под себя :(

[@maxgraph]

Видео про новую версию будет где-то в январе феврале, а пока да, увы, он обновился

[@const1525]

Спасибо за твои видосы! А есть догадки из-за чего может быть так. Скрипт отрабатывает, сообщение пишет отправлено, но само сообщение на почту не приходит. $mail->setFrom('adm@' . $_SERVER['HTTP_HOST'], 'Your best site'); Ты написал вот так, а поле adm@ это по умолчанию или на разных хостах может быть по другому

[@maxgraph]

adm - это просто текст) а вот http_host разный.

[@Giri-16108]

Безусловно круто! Но как сделать "Нажимая на кнопку, я даю согласие на обработку персональных данных и соглашаюсь политикой конфиденциальности."? Что бы без галочки в инпуте нельзя отправить форму.

[@maxgraph]

На js пока не писал такого, есть на jquery старая наработка. - gist.github.com/maxdenaro/a1a3b68eacb57f1b7ab5c90ee21b29f7

[@IhorVasilchenko]

ну испрользуюй возмжности расмотренного плагина вешаешь на input дата - атрибут и в скрипте прописываешь правила. все сработало

[@vitaliiglorytoukraine9216]

Отличное видео! У меня и маска работает и валидация. А вот отправляться почему то не хочет :( Залил на хостинг, нажимаю отправить а в консоли получаю сообщение об ошибке сервера 500 :( Подскажите пожалуйста где искать, что делать?

[@maxgraph]

Возможно ошибка в php

[@vitaliiglorytoukraine9216]

@@maxgraph всё получилось! Но вылез неожиданный баг - после отправки формы меню в хедере не работает. Начинает работать только после принудительного обновления сайта :( Есть идеи с чем это связано?

[@maxgraph]

Угадать оч сложно (

[@МарковДмитрий-х5ф]

Здравствуйте, скажите пожалуйста. Если я выгрузил эту верстку на бесплатный сервер Githud, но письмо на указанную мною почту не приходит? Это проблема в том что сервер плохой и без нормального домена? или что-то не так понял?

[@maxgraph]

На гите не работает отправка

[@МарковДмитрий-х5ф]

@@maxgraph Понял, спасибо)поищу другой бесплатный хостинг для пробы. Спасибо за контент.

[@amantoleu6406]

А надо как то подключать mail.php? Или он просто должен находится в папке

[@maxgraph]

Просто положить

[@delosait]

Максим, спасибо за видео! Если будет возможность и желание, расскажи, пожалуйста, как сюда Гугл капчу3 прикрутить.

[@maxgraph]

Посмотрим) спасибо

[@baton4iki]

Привет,не большая проблема тут Сайт (......) пока не может обработать этот запрос HTTP ERROR 500 Что это за ошибка?

[@Roman197634]

Пытался скачать по ссылке и подключить плагин валидации, но не вышло - нет папки dist с вложениями js. Как быть?

[@maxgraph]

Посмотри новое видео на эту тему)

[@igoraksenov2529]

@@maxgraph а подскажите пожалуйста название видео, не могу найти(((

[@const-shish]

Здравствуйте. Помогите пожалуйста. Как сделать валидацию нескольких форм? У меня валидируется только первая форма. Заранее благодарен!

[@maxgraph]

Здравствуйте! Ну я там как раз писал функцию, её несколько раз вызывать надо с разными данными)

[@const-shish]

@@maxgraph СПАСИБО большое за вашу работу. Мне в чате подсказали через минуту после того, как я туда вопрос отправил

[@maxgraph]

Видел)) пожалуйста)

[@lirrr6555]

Спасибо за видео. Сделал все чисто по уроку. Если вводишь в поле телефона даже 1 цифру, то just-validate уже не ругается. Но как выдавать ошибку если input mask заполнен не полностью? Пытался в just validate указать min lenght, но это вообще не помогает

[@maxgraph]

С этим проблема, решение не нашёл (да и не приходилось вообще)

[@lirrr6555]

@@maxgraph проверяю с помощью js количество символов в инпуте, пишет всегда 18. походу надо решение в инпутмаск искать. Крыша едет, во вторник надо вопрос решить и работу сдать(

[@maxgraph]

Возможно. У меня заказчики принимали так всегда)

[@lirrr6555]

@@maxgraph В итоге решил так: добавил в just-validate в правило strength кастомное регулярное выражение: strength: {custom: '[^_]$'}, которое говорит, что подходит любая строка, которая не содержит знак _ . В inputmask незаполненные значения как раз заменяются нижним подчеркиванием и соответственно валидация не проходит. Может пригодится тебе или еще кому.

[@maxgraph]

Спасибо)

[@6ev]

А как русифицировать сообщения об ошибки формы?

[@maxgraph]

messages: { name: { minLength: 'My custom message about only minLength rule' }, email: 'My custom message about error (one error message for all rules)' }, - да вот, в объекте messages

[@БарчынайУсенова-й7ц]

Можно ли делать сообщения приходил на почту pdf формате?

[@maxgraph]

Можно) есть видео на канале про сохранение данных в doc, думаю тем же методом и в pdf можно

[@БабкенГеворгян-ю9ю]

Скрипт отрабатывает, сообщение пишет отправлено, но само сообщение на почту не приходит. Что делать ?

[@maxgraph]

Проверять, есть ли вообще возможность отправлять у хостинга

[@БабкенГеворгян-ю9ю]

@@maxgraph спасибо учитель)) очень полезные видео

[@ivanmain9659]

@@maxgraph А как проверять?

[@mycats8713]

как установить php mailer autoload?

[@videoblognatalia]

Спасибо за полезное видео. Одна проблема, хочу написать свое регулярное выражение, а валидация проходит по кастомной регулярке(одна заглавная буква, одна маленькая и одна цифра). Всю документацию перерыла не пойму в чем проблема. Хочу чтобы поле имя не пропускало цифры. validateForms('.order__form', { name: {required: true, minLength: 3, strength: { custom: '/[a-z]' }}, tel: {required: true}, address: {required: true,address:true, minLength: 10 }}, {name:{required: 'Вы должны ввести имя'},tel:{required: 'Вы должны ввести телефон'},address:{required: 'Вы должны ввести address'}}, '.thenks-popup', 'send goal');

[@MrEmil-cf8wo]

а можно использовать бесплатный хостинг? чтобы затестить

[@maxgraph]

Если он поддерживает отправку - да

[@zem_andrey]

не могу понять что я делаю не так. Скачал весь код из видео, изменил почту на свою. При клике по кнопке, в консоли пишет "отправлено", а на почту ничего не падает. Пробовал и на опенсервере, и на бесплатном хостинге "beget", итог один

[@maxgraph]

Ну тут либо опечатка все же, либо хостинг запрещает отправку писем. А может письмо в спаме

[@zem_andrey]

@@maxgraph а опенсервер не поддерживает отправку писем, не знаете?

[@maxgraph]

Не знаю)

[@arzamaskin_kirill]

Если ты добавил свою почту в php вместо массива почт, то в этом косяк. Удали и эту строку. В самой почте найти $mail->addAddress($value). И замени value на свою почту. То же самое надо, если будешь убирать заголовок письма из html в php

[@RocketBoy039]

А как вывести, после отправки, блок в html "Спасибо! Ваше сообщение отправлено"?

[@maxgraph]

Найти этот блок в верстке, и в блоке done (или success) прописать ему textContent

[@svet0v]

а зачем здесь оборачивать все input в тег label?

[@maxgraph]

Так правильно для доступности

[@erasylmeiramov8196]

Классно, но у меня при отправки формы выходит страница mail.php и белый экран, а ещё заявка поступает на спам

[@maxgraph]

Значит где-то ошибка

[@erasylmeiramov8196]

@@maxgraph Но я весь код копировал, а ещё через phpmailer у меня появляется ошибка 500

[@maxgraph]

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

[@getmanele]

@@erasylmeiramov8196 у меня так же POST l91608wd.beget.tech/mail.php 500 (Internal Server Error) Как это лечится?

[@IhorVasilchenko]

@@getmanele Я тестировал на бегет все приходит - github.com/frontend-coder/validateformesjs а вот попытка удалить почтовый ящик из html документа в php создал переменную, обработка масива была закоментирована - не увенчалась успехом - просто письмо не приходило на почту , после удаления переменной - письмо начало приходить так же передача нескольких постовых адресов не увенчалась успехом но тут скорее мой косяк так как не совсем представляю, как его передавать, испробывал несколько вариантов чуть не забыл не могу выловить на какой тег вешается класс ".thanks-popup", я так понял это с Яндекс метрики "send goal" всесто этого нужнго прописать все или что-то из этого - yaCounter44799888.reachGoal('poluchit-besplao'); return true; но если все, это вызовет ошибку

[@igorgordeev8931]

При обращении к файлу mail.php выдает 404 ошибку, типа не видит его, может кто знает в чем дело?

[@maxgraph]

путь неверный

[@tovjukov]

А, что за цветовая схема редактора?

[@maxgraph]

One Monokai

[@СветланаЯкимова-ы9т]

ну почему этого нет в программе обучения😵‍💫

[@maxgraph]

Потому что это не относится к вёрстке.

[@СветланаЯкимова-ы9т]

По моему скромному мнению обучение держится на учителях.

[@СветланаЯкимова-ы9т]

@@maxgraph даже то где лежит файл показали. С первого раза совсем теряешься в дебрях папок. Конечно ещё чат выручает, иначе сдалась бы уже давно

[@maxgraph]

Разумеется, как на любом курсе

[@iKorewBro]

Почему вы везде пишите let? Лучше уже пользоваться старым синтаксисом (var), если нет понимания когда использовать let, а когда const :)

[@maxgraph]

А почему я должен использовать const?)

[@iKorewBro]

@@maxgraph а почему let? Используйте var )) А если серьезно - let, если вы собираетесь менять переменную. А в вашем случае все переменные - константы. Соответственно пишем const

[@maxgraph]

Вы не ответили на вопрос. Почему я обязательно должен использовать const? Это правило незыблемо? Без него код не работает? Случится катастрофа, если не написать const? Это деление на let и const сделано лишь для удобства, не более.

[@iKorewBro]

@@maxgraph случится катастрофа. На серьезном проекте вас уволят ))

[@iKorewBro]

@Павел я рад. но если ты понятия не имеешь, когда использовать лет и конст, то пользуйся вар.

[@summersbyy]

Крутое видео, тоже решил переделать свой вариант отправки формы phpmailer и с указанием админ. эмейла непосредственно в скрипте. Ок, $admin_email=[e-mail], но сервер возвращает ошибку : Warning: Invalid argument supplied for foreach() in /home/.../docs/mail.php on line 13 There was a problem sending the form.: Пожалуйста, введите хотя бы один email-адрес получателя.

[@maxgraph]

Может кавычек не хватает?)

[@summersbyy]

@@maxgraph , а не, в коде есть каычки, и даже пробовал убирать обращение к админ_эмейлу как к массиву $admin_email = array(), все равно не помогло(

[@maxgraph]

странно.

[@summersbyy]

@@maxgraph , есть такая идея- раз адрес в post запросе приходит как массив, и адрес один, то записать так : $admin_email = array(); //foreach ( $_POST["admin_email"] as $key => $value ) { // array_push($admin_email, $value); //} $admin_email[] = '[e-mail]';

[@JinxLover666]

Все работает и очень круто! ЛАЙК ЕЗЖИ! Только дружище хочу сделать так чтобы при отправке формы (именно когда все введено правильно и данные с формы отправились на почту) вылазило окошко спасибо, я хз куда код вставить) вставил вот так, но все равно окно появляется при клике на кнопку (даже когда поля пустые), помоги по братски) вот вставка: xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log('Отправлено'); alert('Сообщение успешно отправленно!'); document.querySelector('.order__button').onclick = function() { document.querySelector('.thank').classList.add('active'); } document.querySelector('.thank__close').onclick = function() { document.querySelector('.thank').classList.remove('active'); } } } } P.S. JS вообще не знаю, так что без хейта)

[@maxgraph]

Ну вы же вставили клик внутрь Вставьте содержимое клика)

[@JinxLover666]

​@@maxgraph короче я баран, надо было убрать проверку на клик) ОТДУШИ за скорость ответа + еще 1 лайк)

[@maxgraph]

Спасибо)

[@sergey_zatsepin]

100 кб весит плагин для маски, это лол. Заказчик за такое и в хвост и в гриву должен.

[@maxgraph]

Ага, заказчику то самое дело до килобайтов))

[@Beast8833]

100 кб в век 4-5G и широкополосного интернета это конечно тяжело будет загрузить