Есть форма обратной связи которая отлично работает без битрикса на 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>
$("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 функции после успешной отправки.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Не могу найти определённое свойство в DevExpressПрименение заключается в том, что при включённом этом свойстве в клетках определённого столбца...
Как узнать высоту между якорями, если они сделаны во весь блок, с авто-подстройкой, при смене разрешения
Проект отлично работалПосле того, как удалил DevExpress 11 и поставил версию 13