Форма обратной связи ошибка

100
22 февраля 2022, 07:50

Есть форма обратной связи которая отлично работает без битрикса на js. Но нужно поставить её на битрикс. Использовал компонент main.feedback, натянул шаблон формы и вставил js файл который выдаёт ошибку если поле не заполнено и открывает модальное окно после успешной отправки формы. Но после его вставки перестаёт приходить письмо. Если убрать этот файл, то письмо успешно приходит.Помогите пожалуйста решить мою проблему, заранее спасибо!

$(window).on("load", function() { 
  var i = {}; 
 
  function e(r) { 
    var a = $(r), 
      e = a.val(), 
      s = a.data("required"), 
      o = a.attr("name"); 
 
    function t(r) { 
      void 0 !== i[o] && "" !== i[o] || !s ? r || "" === i[o] ? a.removeClass("error").addClass("not_error") : (a.removeClass("not_error").addClass("error"), 
        a.val("Error: invalid data in this field")) : (a.val("Error: type data in this field"), a.removeClass("not_error").addClass("error")) 
    } 
    switch (o) { 
      case "user_name": 
        t(/^[a-zA-Zа-яА-Я\s]{2,}$/.test(e)); 
        break; 
      case "user_phone": 
        t(/^[\d][\+]?[-\s\.]?[0-9]{0,2}[-\s\.]?[(]?[0-9]{1,3}[)]?[-\s\.\0-9]*$/.test(e)); 
        break; 
      case "user_email": 
        t(/^[^\/!@#$%^&*()_]+@[^\s\.]+\.[a-z]+$/.test(e)); 
        break; 
      case "MESSAGE": 
        t(e.length < 5e3); 
        break; 
      case "user_check": 
        var n = a.parent().find("p.error"); 
        a.prop("checked") ? (n.addClass("d-none"), 
          a.removeClass("error").addClass("not_error")) : (n.removeClass("d-none"), 
          a.removeClass("not_error").addClass("error")) 
    } 
  } 
  $("form").on("submit", function(r) { 
      r.preventDefault(); 
      var a = $(this).find(".form-input, .form-checkbox"); 
      if (a.each(function(r, a) { 
          $(a).data("required") && e(a) 
        }), !a.hasClass("error")) return $("#thanks").modal("show"), !1 
    }), 
    $(".form-input").on({ 
      focus: function() { 
        $(this).val(i[$(this).attr("name")]) 
      }, 
      focusout: function() { 
        i[$(this).attr("name")] = $(this).val(), e(this) 
      } 
    }) 
});
<form action="<?=POST_FORM_ACTION_URI?>" method="POST" class="form"> 
  <?=bitrix_sessid_post()?> 
    <div class="form-group"> 
      <label for="user_name" class="form-label"> 
             Type Your 
             <span class="bold">Name</span> 
             In This Field 
        </label> 
      <div class="mf-text"> 
      </div> 
      <input type="text" name="user_name" id="name" data-required="true" class="form-input"> 
    </div> 
    <div class="form-group"> 
      <label for="user_phone" class="form-label"> 
             Type Your 
             <span class="bold">Phone</span> 
             In This Field 
        </label> 
      <div class="mf-text"> 
      </div> 
      <input type="text" name="user_phone" id="phone" data-required="true" class="form-input"> 
    </div> 
    <div class="form-group"> 
      <label for="user_email" class="form-label"> 
             Type Your 
             <span class="bold">E-mail</span> 
             In This Field 
        </label> 
      <div class="mf-text"> 
      </div> 
      <input type="text" name="user_email" id="email" class="form-input"> 
    </div> 
    <div class="form-group"> 
      <label for="MESSAGE" class="form-label"> 
             Type A Few Words 
             <span class="bold">About Your Project</span> 
        </label> 
      <div class="mf-text"> 
      </div> 
      <textarea id="typeText" name="MESSAGE" class="form-input form-textarea" rows="3"></textarea> 
    </div> 
    <button type="submit" name="submit" class="button button-fill" data-toggle="modal" value="<?=GetMessage(" MFT_SUBMIT ")?>">Send</button> 
    <div class="form-group"> 
      <input id="check" type="checkbox" name="user_check" class="checkbox-field" checked data-required="true"> 
      <label for="check" class="checkbox-label"> 
            I give my consent to the processing of personal data and 
            I agree to the terms of the 
           <a href="/privacy-policy" class="accent-primary">privacy policy</a> 
        </label> 
      <p class="error medium-text d-none">You must accept terms and conditions!</p> 
    </div> 
    <input type="hidden" name="PARAMS_HASH" value="<?=$arResult[" PARAMS_HASH "]?>"> 
</form>

Answer 1
  $("form").on("submit", function(r) {
      r.preventDefault();
      var a = $(this).find(".form-input, .form-checkbox");
      if (a.each(function(r, a) {
          $(a).data("required") && e(a)
        }), !a.hasClass("error")) return $("#thanks").modal("show"), !1
    }),

Вот здесь r.preventDefault(); отключает отправку формы

Изначальный код лично для меня переполнен сокращениями, с которыми я не умею работать на должном уровне. Переписал на jQuery нуждающуюся в правках часть как умею. Думаю люди чья специализация JS смогут сделать "красивее". Тем не менее вариант рабочий: https://jsfiddle.net/adudnik/0rfct81g/

В комментариях расписал суть проверок и изменений.

Обратите внимание, в этом примере убран показ модального окна и реализована отправка формы напрямую.

Если же вам требуется отправлять форму без перезагрузки страницы и выводить ответ в модальном окне - нужно использовать AJAX.

Отправка вашей формы с AJAX: https://jsfiddle.net/adudnik/8onxb9gj/

Вам возможно потребуется донастроить её в зависимости от callback функции после успешной отправки.

READ ALSO
Как в DevExpress называется свойство для показа значка в виде трёх точек в столбце?

Как в DevExpress называется свойство для показа значка в виде трёх точек в столбце?

Не могу найти определённое свойство в DevExpressПрименение заключается в том, что при включённом этом свойстве в клетках определённого столбца...

91
RectTransform узнать ширину и высоту между якорями

RectTransform узнать ширину и высоту между якорями

Как узнать высоту между якорями, если они сделаны во весь блок, с авто-подстройкой, при смене разрешения

81
Бесконечная сборка проекта в Visual Studio

Бесконечная сборка проекта в Visual Studio

Проект отлично работалПосле того, как удалил DevExpress 11 и поставил версию 13

72