Проблемы с работой FormIt не выводятся сообщения после обработки формы.

Всем привет!
modx 3.0.3
Проблемы с настройкой формы обратной связи. Использую FetchIt с FormIt.
Сниппет отправляет письмо по электронной почте и вносит ответ в список отправленных форм пакета FormIt, но не работают вывод сообщений на странице формы и редирект после нажатия кнопки submit. При этом сообщения с ошибками валидатора выводятся штатно.

Подозреваю, что проблемы именно с FormIt, так как пробовал запускать форму через него без использования Fetchit или AjaxForm (через Ajax тоже пробовал с ним тоже не работает) с тем же результатом

Пробовал выводить на страницу сами переменные [[+fi.successMessage]] [[+fi.validation_error_message]], выводит пустоту. Пробовал настроить hook redirect, он тоже не работает. Пробовал отключать валидацию, форма добавляется, письмо отправляется, редирект не работает, сообщения не выводятся.
Никто не сталкивался с таким? Не подскажете, в чем может быть проблема?

Вызов сниппета:
[[!FetchIt?
  &snippet=`FormIt`
  &form=`formfetchtpl`
  &hooks=`email,FormItSaveForm,redirect`
  &emailSubject=`Вам сообщение от сайта [[++site_name]]`
  &emailTo=`[[#1.tv.email]]`
  &emailTpl=`mailTpl`
  &emailFrom=`robot@mail.mail`
  &formName=`Сообщение из формы обратной связи`
  &validate=`user:blank,name:required,email:email:required,question:required,accept:required`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`Сообщение успешно отправлено`
  &redirectTo='8'
]]
Код формы:
<form novalidate action="[[~8]]" method="post" name="application_form" id="application_form" class="application_form">
            <label for="name">Как к Вам обращаться</label>
            <input type="text" name="name" id="name">
            <span data-error="name">[[+fi.error.name]]</span>
            
            <label for="user" class="application_form_imp">Пользователь</label>
            <input type="text" name="user" id="user" class="application_form_imp">
            
            <label for="email">Адрес электронной почты</label>
            <input type="email" name="email" id="email">
            <span data-error="email">[[+fi.error.email]]</span>
            
            <label for="phone">Телефон (по желанию)</label>
            <input type="tel" name="phone" id="phone">
            
            <label for="question">Ваш вопрос</label>
            <textarea name="question" id="question" cols="30" rows="10" maxlength="1000" wrap="hard"></textarea>
            <span data-error="question">[[+fi.error.question]]</span>
            
            <div class="application_form_checkbox">
                <input type="hidden" name="accept" value="">
                <input type="checkbox" name="accept" id="accept">
                <label for="accept"> <div>Согласие на обработку персональных данных</div></label>
            </div>
            <span data-error="accept">[[+fi.error.accept]]</span>
            
        </form>
        <button type="submit" form="application_form" class="button text_button">ОТПРАВИТЬ</button>
        
        [[+fi.success:is=`1`:then=`
            <div role="alert">[[+fi.successMessage]]</div>
        `]]
        [[+fi.validation_error:is=`1`:then=`
            <div role="alert">[[+fi.validation_error_message]]</div>
        `]]
Вадим
29 июля 2023, 03:42
modx.pro
842
0

Комментарии: 12

Dan
Dan
29 июля 2023, 09:05
0
Это плейсхолдер Formit и он будет заполнен и доступен при стандартной отправке Formit, т.е. с перезагрузкой страницы. А вы используете как обертку FetchIt, который позволяет делать ajax-отправку.
При всем этом у FetchIt нет никаких зависимостей, в том числе и библиотек для всплывающих уведомлений, как jgrowl у AjaxForm. Поэтому если вы хотите добавить их, то нужную библиотеку следует подключать отдельно.
Как это делается? Есть отличные примеры в документации (в принципе там все и написано)
    Вадим
    29 июля 2023, 10:37
    0
    Я пытался проверить сообщение в максимально простом его исполненни с простым выводом на странице, пока без подключения всплывающих окон. Повторюсь, у меня даже голый formIt выдаёт тоже самое, а именно даже с ним не работает и хук redirect. А используемый синтаксис на странице формы взят из идущего с fletchIt примера. Ну и другие переменные выводятся нормально — сообщения об ошибках валидации работают. Такое ощущение, что я что-то простое опускаю из вида и не понимаю что.
      Dan
      Dan
      29 июля 2023, 12:02
      0
      Ок, фраза «не работает» вообще ни о чем не говорит.
      Есть ошибки в консоли браузера на момент отправки? В логах Modx что нибудь пишется? Может хук email банально не отрабатывает?
        Вадим
        29 июля 2023, 20:21
        0
        При отключении хука redirect везде тишина

        А после его добавления появляется вот это в консоли:
        fetchit.js?v=3.1.1:132 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
        а вот это в логах
        .../core/components/fetchit/src/FetchIt.php : 81) PHP warning: Undefined array key "fetchit_called"
          Вадим
          29 июля 2023, 21:28
          0
          Как-то не сразу обновился лог, вот такая ещё строчка есть
          /core/components/fetchit/src/FetchIt.php : 81) PHP warning: Undefined array key "fetchit_called"
            Баха Волков
            29 июля 2023, 21:51
            +1
            Ты немного не понимаешь в чём смысл FetchIt если пытаешься использовать хук redirect. Он нужен в том случае, если ты используешь FormIt напрямую.

            Для того чтобы сделать редирект с FetchIt после успешной обработки формы, тебе нужен такой код:

            document.addEventListener('fetchit:success', (e) => {
              window.location.href = 'новый url'
              // или
              window.location.href = '[[~id страницы]]'
            })
              Вадим
              29 июля 2023, 22:10
              0
              redirect пытался повесить от безысходности, после неудачных попыток вывести подтверждение отправки формы для пользователя. Но у меня redirect не заработал и с formIt напрямую.

              С этим скриптом редирект с fetchIt работает, большое спасибо!
          Артур Шевченко
          29 июля 2023, 13:25
          0
          Покажи JS который должен выводить уведомления?
            Вадим
            29 июля 2023, 20:19
            0
            Я не подключал никаких скриптов. Как было указано в примере шаблона формы вставил в конце конструкцию
            [[+fi.success:is=`1`:then=`
            <div role="alert">[[+fi.successMessage]]</div>
            `]]
            [[+fi.validation_error:is=`1`:then=`
            <div role="alert">[[+fi.validation_error_message]]</div>
            `]]
            и за ней просто для проверки
            <div role="alert">[[+fi.success]]</div>
            <div role="alert">[[+fi.validation]]</div>
            В данный момент hook redirect не вызываю

            После нажатия кнопки submit в этих сообщениях ничего не появляется. Я так понял, что в этом случае уведомления должны появляться на самой странице, собственно так и хотел реализовать. Был не прав? Так не работает? Нужно подключать дополнительные скрипты?
              alex.shabun
              27 марта 2024, 22:38
              0
              Если используете сниппет для отправки формы без перезагрузки страницы, то js компонента FetchIt вставляет текст ошибок внутри тега с атрибутом data-error:
              <input id="c-name" type="text" name="name" value="">
              <span data-error="name"></span>
              если я отправлю форму с незаполненным обязательным полем, то код на странице станет таким:
              <input class="is-invalid" id="c-name" type="text" name="name" value="" aria-invalid="true">
              <span data-error="name">
                  <span class="error">Это поле обязательно для заполнения.</span>
              </span>
              Если нужно что-либо самому сделать, то поможет инфа из раздела JS API. В частности FetchIt.Message
          Баха Волков
          29 июля 2023, 16:01
          +1
          С версии 1.1.0 и 3.1.0 появилась настройка fetchit.frontend.default.notifier, вам стоит только включить её и у вас буду всплывающие уведомления Notyf
            Баха Волков
            29 июля 2023, 16:04
            +1
            Пока этот функционал незадокументирован, свободного времени нет, но уже можно пользоваться
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            12