AjaxForm без jQuery

Приветствую тебя дорогой читатель. Давно хотел это сделать и наконец-то сделал — теперь для работы AjaxForm не нужен jQuery.

ТЕПЕРЬ ДЛЯ ЭТОГО НУЖНО ПРОСТО ИСПОЛЬЗОВАТЬ SENDIT

Для этого нужно
1. Перейти по ссылке.
2. Заменить содержимое папок core/components/ajaxform и assets/componentns/ajaxform/ данными из репозитория.
3. Заменить код сниппета AjaxForm кодом из репозитория.
Если будут ошибки пишите в комментарии, а под катом немного о нюансах.


Немного нюансов.
0. В лексиконы добавлены следующие записи

$_lang['af_message_uploded_progress'] = 'Загружено: ';
$_lang['af_message_uploded_success'] = 'Данные полностью загружены на сервер!';
$_lang['af_message_uploded_error'] = 'Произошла ошибка при загрузке данных на сервер!';
$_lang['af_message_ajax_error'] = 'Форма не была отправлена! Свяжитесь с администратором.';

Первые три параметры отвечают за загрузку файлов, последний будет показан если запрос не попадёт на сервер или если сервер вернёт код ответа не 200.

1. Событие af_complete осталось, но теперь доступ к параметрам осуществляется так

document.addEventListener('af_complete', function (e) {
       e.detail.status; // статус ответа
       e.detail.response; // сам ответ
       e.detail.form; // элемент формы
       e.detail.xhr; // объект запроса        
    });

2. Событие af_complete можно отменить стандартным способом

document.addEventListener('af_complete', function (e) {
       e.preventDefault();
      // тут кастомный код обработки ответа.
    });

3.form теперь это обычный элемент DOM полученный через document.querySelector, поэтому и работать с ней нужно как с DOM элементом.
4. Параметр clearFieldsOnSuccess точно работает, можно отменять перезагрузку формы, для этого нужно передать false без кавычек.
5. Для показа уведомлений нужно установить SweetAlert2.
6. Назначение некоторых функций осталось для меня загадкой, поэтому я просто переписал их на чистый JavaScript.

UPD от 15.02.22: Добавил ссылку на репозиторий для помощи в поиске ошибок и рефакторинге.
UPD от 07.03.22:
Добавил новые параметры сниппета AjaxForm:
Если в форме есть input[type=«file»]
1. fileUplodedProgressMsg — сообщение, которое будет показано во время загрузки файлов.
2. fileUplodedSuccessMsg — сообщение об успешном завершении загрузки файлов.
3. fileUplodedErrorMsg — сообщение об ошибке при загрузке файлов, не путать с сообщением от валидатора файлов, если такой у вас есть.
4. showUplodedProgress — по умолчанию false, т.е. прогресс загрузки не показывается, если нужно включить показ прогресса ставим true. Соответственно добавлены методы обработки процесса загрузки файлов в default.js, они называются onUploadProgress, onUploadFinished, onUploadError;

Так же в отдельные методы вынес обработку ошибок валидации (onError) и успешной отправки формы (onSuccess).

Всю логику можно переопределить, для этого в конструкторе класса core/components/ajaxform/model/ajaxform/ajaxform.class.php я переопределил конструктор, теперь можно в системные настройки добавить свои пути к стилям и скриптам через настройки af_frontend_css и af_frontend_js соответственно. Правда выпилить стандартные параметры сниппета не могу, поэтому, в целом, данный функционал не работает.

UPD от 09.03.22:
При наличии на странице более одного вызова AjaxForm обязательно указывать параметр formSelector. Он должен быть уникальным для каждой формы, в противном случае каждая форма будет отправляться более 1 раза. Уникальный селектор генерируется автоматически. ВАЖНО! И это не я придумал, селектор это всегда название класса указанное без точки. Если нужно чтобы применились стили по умолчанию в форму руками надо добавить класс ajax_form. Скорее всего я этот момент доработаю, но это неточно.
UPD от 12.03.2022
Класс ajax_form добавляется автоматически ко всем формам.

UPD от 29.04.2022
Нашел способ передавать произвольный обработчик уведомлений. Чтобы добавить свой обработчик нужно создать минимум 1 системную настройку с именем af_message_handler с названием класса обработчика. В этом классе должны быть реализованы методы error, success, close и info. Можно сгруппировать эти методы, как это сделано в SweetAlert2, в этом случае нужно создать ещё одну системную настройку с именем af_message_handler_method где должно быть указано название подметода. Например, если ваш класс выводит сообщение так

MessageHandler.success(message);

то MessageHandler должно быть значением af_message_handler. Если вывод сообщения происходит так

MessageHandler.Method.success(message);

то MessageHandler должно быть значением af_message_handle, а Method значением af_message_handler_method.
Однако, это всё только в теории, на практике я не проверял, но SweetAlert2 работает.

class AjaxForm {
    constructor (config) {
        this.forms = document.querySelectorAll(config['formSelector'])
    }

    resetErrors (e) {
        // some code
    }

    success () {}

    sendAjax () {}
}

new AjaxForm(afConfig)

default.js:7 Form not found. Check the correctness of the selector.