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

Поделиться
HTML-код
  • Опубликовано: 15 ноя 2024

Комментарии • 137

  • @redblueedge
    @redblueedge 4 года назад +16

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

  • @vfat5371
    @vfat5371 3 года назад +7

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

    • @maxgraph
      @maxgraph  3 года назад +2

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

  • @АнастасияТитова-в1ю
    @АнастасияТитова-в1ю 4 года назад +5

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

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо))

  • @dis1755
    @dis1755 4 года назад +3

    Актуально 👍

  • @erega74
    @erega74 4 года назад +2

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

    • @maxgraph
      @maxgraph  4 года назад +1

      Спасибо!)

  • @vzrosly_muzik
    @vzrosly_muzik 2 года назад

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

  • @dimalepel
    @dimalepel 2 года назад

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

  • @arzamaskin_kirill
    @arzamaskin_kirill 3 года назад

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

  • @АнтонОРТЗИ
    @АнтонОРТЗИ 11 месяцев назад

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

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

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

  • @summersbyy
    @summersbyy 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад +1

      Спасибо)

  • @MrEmil-cf8wo
    @MrEmil-cf8wo 3 года назад

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

  • @zeleboba1398
    @zeleboba1398 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад +1

      пожалуйста)

  • @asgard1428
    @asgard1428 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

    • @asgard1428
      @asgard1428 2 года назад

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

  • @dzmitryk7546
    @dzmitryk7546 3 года назад

    Обожаю тебя

  • @ii-yj5qj
    @ii-yj5qj 2 года назад

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

  • @Sergey_Klimov
    @Sergey_Klimov 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

    • @Sergey_Klimov
      @Sergey_Klimov 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @alberoforte6816
    @alberoforte6816 4 года назад

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

  • @okireev
    @okireev 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад

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

  • @svet0v
    @svet0v 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

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

  • @tovjukov
    @tovjukov 3 года назад

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

  • @АндрейАристов-ы5х
    @АндрейАристов-ы5х 4 года назад

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

  • @vitaliiglorytoukraine9216
    @vitaliiglorytoukraine9216 3 года назад +1

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

    • @vitaliiglorytoukraine9216
      @vitaliiglorytoukraine9216 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

  • @ligaarrow3460
    @ligaarrow3460 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

      Думаю что нет

  • @baton4iki
    @baton4iki 3 года назад

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

  • @radnet12
    @radnet12 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

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

  • @const1525
    @const1525 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад

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

  • @МарковДмитрий-х5ф
    @МарковДмитрий-х5ф 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

    • @МарковДмитрий-х5ф
      @МарковДмитрий-х5ф 3 года назад

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

  • @6ev
    @6ev 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

  • @MrEmil-cf8wo
    @MrEmil-cf8wo 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @super_snejinka
    @super_snejinka 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @Roman197634
    @Roman197634 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

    • @igoraksenov2529
      @igoraksenov2529 Год назад

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

  • @mycats8713
    @mycats8713 3 года назад

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

  • @amantoleu6406
    @amantoleu6406 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @БабкенГеворгян-ю9ю
    @БабкенГеворгян-ю9ю 3 года назад +1

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

    • @maxgraph
      @maxgraph  3 года назад

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

    • @БабкенГеворгян-ю9ю
      @БабкенГеворгян-ю9ю 3 года назад

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

    • @ivanmain9659
      @ivanmain9659 Год назад

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

  • @videoblognatalia
    @videoblognatalia 3 года назад

    Спасибо за полезное видео. Одна проблема, хочу написать свое регулярное выражение, а валидация проходит по кастомной регулярке(одна заглавная буква, одна маленькая и одна цифра). Всю документацию перерыла не пойму в чем проблема. Хочу чтобы поле имя не пропускало цифры.
    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');

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

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @delosait
    @delosait 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

  • @const-shish
    @const-shish 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

    • @const-shish
      @const-shish 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

  • @tovjukov
    @tovjukov 3 года назад

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

  • @Giri-16108
    @Giri-16108 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

    • @IhorVasilchenko
      @IhorVasilchenko 3 года назад

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

  • @RocketBoy039
    @RocketBoy039 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад +1

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

  • @zem_andrey
    @zem_andrey 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

    • @zem_andrey
      @zem_andrey 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

      Не знаю)

    • @arzamaskin_kirill
      @arzamaskin_kirill 3 года назад

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

  • @lirrr6555
    @lirrr6555 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

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

    • @lirrr6555
      @lirrr6555 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

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

    • @lirrr6555
      @lirrr6555 4 года назад +4

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

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо)

  • @erasylmeiramov8196
    @erasylmeiramov8196 4 года назад +1

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

    • @maxgraph
      @maxgraph  4 года назад

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

    • @erasylmeiramov8196
      @erasylmeiramov8196 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

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

    • @getmanele
      @getmanele 4 года назад +1

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

    • @IhorVasilchenko
      @IhorVasilchenko 3 года назад +1

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

  • @svet0v
    @svet0v 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

  • @igorgordeev8931
    @igorgordeev8931 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

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

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

    • @maxgraph
      @maxgraph  3 года назад

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

    • @СветланаЯкимова-ы9т
      @СветланаЯкимова-ы9т 3 года назад

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

    • @СветланаЯкимова-ы9т
      @СветланаЯкимова-ы9т 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

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

  • @iKorewBro
    @iKorewBro Год назад

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

    • @maxgraph
      @maxgraph  Год назад

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

    • @iKorewBro
      @iKorewBro Год назад

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

    • @maxgraph
      @maxgraph  Год назад

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

    • @iKorewBro
      @iKorewBro Год назад

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

    • @iKorewBro
      @iKorewBro Год назад

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

  • @summersbyy
    @summersbyy 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад +1

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

    • @summersbyy
      @summersbyy 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

      странно.

    • @summersbyy
      @summersbyy 4 года назад

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

  • @JinxLover666
    @JinxLover666 4 года назад

    Все работает и очень круто! ЛАЙК ЕЗЖИ! Только дружище хочу сделать так чтобы при отправке формы (именно когда все введено правильно и данные с формы отправились на почту) вылазило окошко спасибо, я хз куда код вставить) вставил вот так, но все равно окно появляется при клике на кнопку (даже когда поля пустые), помоги по братски)
    вот вставка:
    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
      @maxgraph  4 года назад

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

    • @JinxLover666
      @JinxLover666 4 года назад

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

    • @maxgraph
      @maxgraph  4 года назад

      Спасибо)

  • @sergey_zatsepin
    @sergey_zatsepin 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад +1

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

    • @Beast8833
      @Beast8833 2 года назад

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