В основном скрипте
$(document).ready(function() {
$('.main__form-wrapper form').submit(function(e) {
e.preventDefault();
$('span.error').remove();
let name = $(this).find('#input-name').val();
let phone = $(this).find('#input-phone').val();
let email = $(this).find('#input-email').val();
let formName = $(this).attr('name');
let parentClass = $(this).parent().parent().parent().attr('class').split(' ');
let approve = true;
if (name.length < 1 && name != undefined) {
$(this).find('#input-name').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
approve = false;
}
if (phone != undefined) {
if (phone.length < 1) {
$(this).find('#input-phone').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
approve = false;
} else {
var regEx = /^\+?[78][-\(]?\d{3}\)?-?\d{3}-?\d{2}-?\d{2}$/;
var validEmail = regEx.test(phone);
if (!validEmail) {
$(this).find('#input-phone').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Введите правильный телефон</span>');
approve = false;
}
}
}
if (email != undefined) {
if (email.length < 1) {
$('#input-email').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
approve = false;
} else {
var regEx = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
var validEmail = regEx.test(email);
if (!validEmail) {
$('#input-email').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Введите правильный Email</span>');
approve = false;
}
}
}
if (approve) {
ajaxForm(document.getElementsByName(formName)[0], '/local/ajax/ajax-form.php', parentClass[1]);
$('.' + parentClass[1] + ' .success-message').css('display', 'block');
}
});
});
/**
* Функция обработки Ajax запроса формы
*/
function ajaxForm(obForm, link, domclass) {
let xhr = new XMLHttpRequest();
xhr.open('POST', link);
xhr.onload = function() {
if (xhr.status != 200) {
alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
} else {
var json = JSON.parse(xhr.responseText)
if (! json.success) {
let errorStr = '';
for (let fieldKey in json.errors) {
errorStr += json.errors[fieldKey] + '<br>';
}
// Ошибки вывести в элемент с классом error-msg
//obForm.getElementsByClassName('error-msg')[0].innerHTML = errorStr;
} else {
// Показываем сообщение об успешной отправке
obForm.innerHTML = '';
document.querySelectorAll('.' + domclass + ' .request-call__desc')[0].innerHTML = 'Спасибо, ваша заявка успешно отправлена!';
//document.querySelectorAll('.' + domclass + ' .success-message').style.display = 'block';
// popupSuccess()
}
}
};
xhr.onerror = function() {
alert("Запрос не удался");
};
// Передаем все данные из формы
xhr.send(new FormData(obForm));
}
Создаем php файл-обработчик в папке /local/ajax-form.php
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';
// Подключаем модуль веб-форм
CModule::IncludeModule("form");
// Проверка валидности отправки формы
if (check_bitrix_sessid()) {
$formErrors = CForm::Check($_POST['WEB_FORM_ID'], $_REQUEST, false, "Y", 'Y');
// Если не все обязательные поля заполнены
if (count($formErrors)) {
echo json_encode(['success' => false, 'errors' => $formErrors]);
} elseif ($RESULT_ID = CFormResult::Add($_POST['WEB_FORM_ID'], $_REQUEST)) {
// Отправляем все события как в компоненте веб форм
CFormCRM::onResultAdded($_POST['WEB_FORM_ID'], $RESULT_ID);
CFormResult::SetEvent($RESULT_ID);
CFormResult::Mail($RESULT_ID);
// говорим что успешно заявку получили
echo json_encode(['success' => true, 'errors' => []]);
} else {
// Какие-то еще ошибки произошли
echo json_encode(['success' => false, 'errors' => $GLOBALS["strError"]]);
}
} else {
// Предотвратили CSRF атаку
echo json_encode(['success' => false, 'errors' => ['sessid' => 'Не верная сессия. Попробуйте обновить страницу']]);
}
// Файл ниже подключать обязательно, там закрытие соединения с базой данных
require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_after.php';