form-father 0.2.11 → 0.4.0

package/dist/index.js

@@ -15,6 +15,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -363,6 +375,65 @@ registerBuiltinValidator('tel', v => /^\+7\d{10}$/.test(v), 'Неверный ф
 registerBuiltinValidator('url', v => isUrlValid(v), 'Неверный формат');
 registerBuiltinValidator('not-numbers', v => !/[0-9]/.test(v), 'Неверный формат');
 
+function readFirstIssueMessage(error) {
+    var _a;
+    if (!error || typeof error !== 'object')
+        return undefined;
+    const issues = error.issues || error.errors;
+    if (Array.isArray(issues)) {
+        const firstMessage = (_a = issues.find(issue => typeof (issue === null || issue === void 0 ? void 0 : issue.message) === 'string')) === null || _a === void 0 ? void 0 : _a.message;
+        if (firstMessage)
+            return firstMessage;
+    }
+    return typeof error.message === 'string' ? error.message : undefined;
+}
+function resolveMessage(error, message) {
+    if (typeof message === 'function')
+        return message(error);
+    return message || readFirstIssueMessage(error);
+}
+function normalizeResult(result, message) {
+    if (typeof result === 'object' && result !== null)
+        return result;
+    if (result === undefined)
+        return true;
+    return result ? true : { valid: false, message };
+}
+function createSchemaValidator(schema, options = {}) {
+    return (value, $input, $form, params) => __awaiter(this, void 0, void 0, function* () {
+        const mappedValue = options.mapValue ? options.mapValue(value, $input, $form, params) : value;
+        try {
+            if (typeof schema === 'function') {
+                return normalizeResult(yield schema(mappedValue), resolveMessage(undefined, options.message));
+            }
+            if (typeof schema.safeParse === 'function') {
+                const result = yield schema.safeParse(mappedValue);
+                if (result.success)
+                    return true;
+                return { valid: false, message: resolveMessage(result.error || result, options.message) };
+            }
+            if (typeof schema.parse === 'function') {
+                yield schema.parse(mappedValue);
+                return true;
+            }
+        }
+        catch (error) {
+            return { valid: false, message: resolveMessage(error, options.message) };
+        }
+        return { valid: false, message: resolveMessage(undefined, options.message) };
+    });
+}
+function registerSchemaValidator(name, schema, defaultMessage, options = {}) {
+    const { override } = options, adapterOptions = __rest(options, ["override"]);
+    registerValidator(name, createSchemaValidator(schema, adapterOptions), defaultMessage, { override });
+}
+function createFieldValidator(predicate, message) {
+    return (value, $input, $form, params) => __awaiter(this, void 0, void 0, function* () {
+        const valid = yield predicate(value, $input, $form, params);
+        return valid ? true : { valid: false, message };
+    });
+}
+
 var _a;
 // --- shared cross-file state (singleton via globalThis) ---
 const FORM_GLOBAL_KEY = Symbol.for('formfather.shared');
@@ -374,7 +445,9 @@ const __shared =
     defaultParams: {},
     defaultValidationSchema: undefined,
 });
+const FORM_ERROR_FIELD = '_form';
 let loaderIdCounter = 0;
+const FORM_INSTANCES = new WeakMap();
 /** Изначальная дефолтная схема. */
 const INITIAL_DEFAULT_SCHEMA = {
     tel: {
@@ -427,6 +500,11 @@ class Form {
         this.$submits = [];
         this.waitResponse = false;
         this.inputs = null;
+        this.fieldEventHandlers = [];
+        this.liveValidationTimers = new WeakMap();
+        this.fieldValidationTokens = new WeakMap();
+        this.fieldValidationTokenCounter = 0;
+        this.errors = [];
         /** Общие настройки анимаций (можно подправить под вкус) */
         this._anim = {
             duration: 220,
@@ -445,29 +523,27 @@ class Form {
             loaderColor: '#fff',
             showLoaderButton: true,
             scrollToFirstErroredInput: true,
+            focusFirstErroredInput: false,
             logging: false,
             inputSelector: '.input',
             inputWrapperSelector: '.input-primary',
+            validateOn: 'submit',
+            revalidateOn: ['input', 'change'],
+            validationDebounce: 0,
+            errorContainerAttribute: 'data-error-container',
+            validationStateAttribute: 'data-form-father-state',
+            observeMutations: false,
         };
         /* Слияние параметров: глобальные параметры → пользовательские параметры */
         this.config = Object.assign({}, defaultConfig, Form.defaultParams, options);
         if (this.$el) {
             this.$submits = this.findSubmitElements();
-            this._onSubmitClickHandler = (e) => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b, _c, _d;
-                e.preventDefault();
-                (_b = (_a = this.config).onBeforeValidate) === null || _b === void 0 ? void 0 : _b.call(_a, this);
-                const isValid = yield this.validate();
-                (_d = (_c = this.config).onAfterValidate) === null || _d === void 0 ? void 0 : _d.call(_c, isValid, this);
-                if (isValid) {
-                    yield this.submit();
-                }
-            });
             if (this.isCorrectArguments()) {
-                this.$submits.forEach($submit => {
-                    $submit.addEventListener('click', this._onSubmitClickHandler);
-                });
+                this.bindSubmitHandlers();
                 this.initialization();
+                this.bindFieldValidationEvents();
+                this.setupMutationObserver();
+                FORM_INSTANCES.set(this.$el, this);
             }
         }
         else {
@@ -477,6 +553,193 @@ class Form {
     getOptions() {
         return this.options;
     }
+    /**
+     * Инициализирует сразу несколько форм по CSS-селектору. Если форма уже инициализирована, её настройки обновятся.
+     *
+     * @param selector - CSS-селектор форм. По умолчанию `form[data-form-father]`.
+     * @param options - Общие параметры для найденных форм.
+     */
+    static initAll(selector = 'form[data-form-father]', options = {}) {
+        /* istanbul ignore next -- SSR guard: jsdom does not allow document to be unset cleanly. */
+        if (typeof document === 'undefined')
+            return [];
+        return Array.from(document.querySelectorAll(selector))
+            .filter($form => $form.tagName === 'FORM')
+            .map($form => {
+            const existing = FORM_INSTANCES.get($form);
+            if (existing) {
+                existing.updateOptions(options);
+                return existing;
+            }
+            return new Form($form, options);
+        });
+    }
+    /** Обновляет настройки конкретного инстанса формы без пересоздания обработчиков вручную. */
+    updateOptions(options) {
+        this.options = Object.assign(Object.assign({}, this.options), options);
+        this.config = Object.assign(Object.assign({}, this.config), options);
+        this.refreshControls();
+        this.bindSubmitHandlers();
+        this.bindFieldValidationEvents();
+        this.setupMutationObserver();
+        return this;
+    }
+    /** Возвращает текущий список ошибок формы. */
+    getErrors() {
+        return this.errors.map(error => (Object.assign({}, error)));
+    }
+    /** Возвращает значения формы обычным объектом. */
+    getValues() {
+        return serializeFormToJSON(this.$el);
+    }
+    normalizeValueList(value) {
+        return Array.isArray(value) ? value.map(String) : [String(value)];
+    }
+    /** Проставляет значения полей по `name` и уведомляет UI через `input`/`change` события. */
+    setValues(values) {
+        this.getAllFields().forEach($field => {
+            if (!$field.name || !Object.prototype.hasOwnProperty.call(values, $field.name))
+                return;
+            const value = values[$field.name];
+            if ($field instanceof HTMLInputElement && $field.type === 'file')
+                return;
+            if ($field instanceof HTMLInputElement && $field.type === 'checkbox') {
+                if (typeof value === 'boolean') {
+                    $field.checked = value;
+                }
+                else {
+                    $field.checked = this.normalizeValueList(value).includes($field.value);
+                }
+            }
+            else if ($field instanceof HTMLInputElement && $field.type === 'radio') {
+                $field.checked = String(value) === $field.value;
+            }
+            else if ($field instanceof HTMLSelectElement && $field.multiple) {
+                const valuesList = this.normalizeValueList(value);
+                Array.from($field.options).forEach(option => {
+                    option.selected = valuesList.includes(option.value);
+                });
+            }
+            else {
+                $field.value = value == null ? '' : String(value);
+            }
+            $field.dispatchEvent(new Event('input', { bubbles: true }));
+            $field.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        return this;
+    }
+    /** Снимает все клиентские и серверные ошибки с формы, не меняя значения полей. */
+    clearErrors() {
+        this.errors = [];
+        this.getAllFields().forEach($field => {
+            this.hideError($field);
+            this.clearFieldValidationState($field);
+        });
+        this.hideErrorForm();
+        return this;
+    }
+    isErrorResponse(issue) {
+        return (!!issue &&
+            typeof issue === 'object' &&
+            typeof issue.name === 'string' &&
+            typeof issue['error-msg'] === 'string');
+    }
+    normalizeValidationIssues(issues, source) {
+        if (issues == null || issues === true)
+            return [];
+        if (issues === false)
+            return [{ message: 'Некорректные данные формы', source }];
+        if (typeof issues === 'string')
+            return [{ message: issues, source }];
+        if (Array.isArray(issues)) {
+            return issues.flatMap(issue => this.normalizeValidationIssues(issue, source));
+        }
+        if (this.isErrorResponse(issues)) {
+            return [
+                {
+                    field: issues.name,
+                    rule: source,
+                    message: issues['error-msg'],
+                    source,
+                },
+            ];
+        }
+        if (typeof issues === 'object' && 'message' in issues && typeof issues.message === 'string') {
+            return [Object.assign(Object.assign({}, issues), { source: issues.source || source })];
+        }
+        if (typeof issues === 'object') {
+            return Object.entries(issues).map(([field, message]) => ({
+                field,
+                rule: source,
+                message,
+                source,
+            }));
+        }
+        return [];
+    }
+    applyValidationIssue(issue, source) {
+        const issueSource = issue.source || source;
+        const rule = issue.rule || issueSource;
+        const field = issue.field || FORM_ERROR_FIELD;
+        if (field === FORM_ERROR_FIELD) {
+            this.setErrorRecord(FORM_ERROR_FIELD, rule, issue.message, issueSource);
+            this.showErrorForm(issue.message);
+            return null;
+        }
+        const $field = this.findFieldByName(field);
+        if (!$field) {
+            this.setErrorRecord(field, rule, issue.message, issueSource);
+            console.warn(`Не найдено поле с именем: ${field}, для вывода ошибки: ${issue.message}`);
+            return null;
+        }
+        this.showFieldError($field, issue.message, issueSource, rule);
+        return $field;
+    }
+    /** Показывает несколько ошибок формы или полей: из backend map/array, `ErrorResponse[]` или form validators. */
+    setErrors(issues, source = 'server') {
+        this.normalizeValidationIssues(issues, source).forEach(issue => {
+            this.applyValidationIssue(issue, source);
+        });
+        return this;
+    }
+    validateFormValidators() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const validators = this.config.formValidators
+                ? Array.isArray(this.config.formValidators)
+                    ? this.config.formValidators
+                    : [this.config.formValidators]
+                : [];
+            const erroredInputs = [];
+            let ok = true;
+            for (const validator of validators) {
+                const result = yield validator({
+                    form: this,
+                    formElement: this.$el,
+                    values: this.getValues(),
+                    errors: this.getErrors(),
+                });
+                const issues = this.normalizeValidationIssues(result, 'client');
+                if (issues.length === 0)
+                    continue;
+                ok = false;
+                issues.forEach(issue => {
+                    const $field = this.applyValidationIssue(issue, 'client');
+                    if ($field)
+                        erroredInputs.push($field);
+                });
+            }
+            return { ok, erroredInputs };
+        });
+    }
+    /** Сбрасывает форму через native `reset()` и опционально очищает ошибки. */
+    reset(options = {}) {
+        this.$el.reset();
+        this.refreshControls();
+        if (options.clearErrors !== false) {
+            this.clearErrors();
+        }
+        return this;
+    }
     /**
      * Обновляет параметры по умолчанию для настроек формы. Метод объединяет переданные параметры с уже существующими
      * параметрами по умолчанию.
@@ -487,21 +750,123 @@ class Form {
     static setDefaultParams(params) {
         this.defaultParams = Object.assign(Object.assign({}, this.defaultParams), params);
     }
+    refreshControls() {
+        this.inputs = this.$el.querySelectorAll(this.config.inputSelector);
+    }
     findSubmitElements() {
         return Array.from(this.$el.querySelectorAll('input[type="submit"], input[type="image"], button[type="submit"], button:not([type])'));
     }
+    bindSubmitHandlers() {
+        if (!this._onSubmitClickHandler) {
+            this._onSubmitClickHandler = (e) => __awaiter(this, void 0, void 0, function* () {
+                yield this.handleSubmitEvent(e);
+            });
+        }
+        this.$submits.forEach($submit => {
+            $submit.removeEventListener('click', this._onSubmitClickHandler);
+        });
+        this.$submits = this.findSubmitElements();
+        this.$submits.forEach($submit => {
+            $submit.addEventListener('click', this._onSubmitClickHandler);
+        });
+    }
     initialization() {
-        this.inputs = this.$el.querySelectorAll(this.config.inputSelector);
+        this.refreshControls();
         this._onSubmitHandler = (e) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
+            yield this.handleSubmitEvent(e);
+        });
+        this.$el.addEventListener('submit', this._onSubmitHandler);
+    }
+    handleSubmitEvent(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f;
             e.preventDefault();
             (_b = (_a = this.config).onBeforeValidate) === null || _b === void 0 ? void 0 : _b.call(_a, this);
             const isValid = yield this.validate();
             (_d = (_c = this.config).onAfterValidate) === null || _d === void 0 ? void 0 : _d.call(_c, isValid, this);
-            if (isValid)
-                this.submit();
+            if (!isValid) {
+                (_f = (_e = this.config).onValidationError) === null || _f === void 0 ? void 0 : _f.call(_e, this.getErrors(), this);
+                return {
+                    success: false,
+                    error: this.getErrors(),
+                };
+            }
+            return this.submit();
         });
-        this.$el.addEventListener('submit', this._onSubmitHandler);
+    }
+    normalizeTriggers(value, fallback) {
+        const triggers = value == null ? fallback : Array.isArray(value) ? value : [value];
+        return Array.from(new Set(triggers));
+    }
+    clearFieldValidationEvents() {
+        this.fieldEventHandlers.forEach(({ $input, event, handler }) => {
+            $input.removeEventListener(event, handler);
+        });
+        this.fieldEventHandlers = [];
+    }
+    bindFieldValidationEvents() {
+        this.clearFieldValidationEvents();
+        const validateOn = this.normalizeTriggers(this.config.validateOn, ['submit']).filter((event) => event !== 'submit');
+        const revalidateOn = this.normalizeTriggers(this.config.revalidateOn, ['input', 'change']).filter((event) => event !== 'submit');
+        const events = Array.from(new Set([...validateOn, ...revalidateOn]));
+        if (events.length === 0)
+            return;
+        const fields = this.getAllFields();
+        fields.forEach($input => {
+            events.forEach(event => {
+                const handler = () => {
+                    const shouldValidate = validateOn.includes(event) || this.hasFieldError($input);
+                    if (shouldValidate)
+                        this.scheduleFieldValidation($input);
+                };
+                $input.addEventListener(event, handler);
+                this.fieldEventHandlers.push({ $input, event, handler });
+            });
+        });
+    }
+    scheduleFieldValidation($input) {
+        const currentTimer = this.liveValidationTimers.get($input);
+        if (currentTimer)
+            clearTimeout(currentTimer);
+        const delay = Math.max(0, Number(this.config.validationDebounce) || 0);
+        const run = () => {
+            void this.validateField($input);
+        };
+        if (delay === 0) {
+            run();
+            return;
+        }
+        const timer = setTimeout(run, delay);
+        this.liveValidationTimers.set($input, timer);
+    }
+    setupMutationObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = undefined;
+        if (!this.config.observeMutations || typeof MutationObserver === 'undefined')
+            return;
+        this.mutationObserver = new MutationObserver(() => {
+            this.refreshControls();
+            this.bindSubmitHandlers();
+            this.bindFieldValidationEvents();
+        });
+        this.mutationObserver.observe(this.$el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    getErrorContainer($input) {
+        const attrName = this.config.errorContainerAttribute || 'data-error-container';
+        const selector = $input.getAttribute(attrName);
+        if (!selector)
+            return null;
+        try {
+            return document.querySelector(selector);
+        }
+        catch (_a) {
+            console.warn(`[FormFather] Invalid error container selector "${selector}"`);
+            return null;
+        }
     }
     /**
      * Показывает ошибку для поля ввода.
@@ -510,6 +875,15 @@ class Form {
      * @param {String} text - Текст ошибки.
      */
     showError($input, text) {
+        $input.setAttribute('aria-invalid', 'true');
+        const $errorContainer = this.getErrorContainer($input);
+        if ($errorContainer) {
+            $errorContainer.textContent = text;
+            if (!$errorContainer.hasAttribute('role'))
+                $errorContainer.setAttribute('role', 'alert');
+            $errorContainer.removeAttribute('hidden');
+            return;
+        }
         const $inputWrapper = closest($input, this.config.inputWrapperSelector);
         if (!$inputWrapper) {
             console.warn(`Не найдена обёртка для поля с именем: ${$input.name || $input.type}`);
@@ -520,7 +894,6 @@ class Form {
             customShowError.call($inputWrapper, text);
             return;
         }
-        $input.setAttribute('aria-invalid', 'true');
         $inputWrapper.classList.add('input__wrapper--error');
         let $error = $inputWrapper.querySelector('[data-form-father-error]');
         if (!$error) {
@@ -586,7 +959,12 @@ class Form {
     hideError($input) {
         var _a;
         const $inputWrapper = closest($input, this.config.inputWrapperSelector) || $input.parentElement;
+        const $errorContainer = this.getErrorContainer($input);
         $input.removeAttribute('aria-invalid');
+        if ($errorContainer) {
+            $errorContainer.textContent = '';
+            $errorContainer.setAttribute('hidden', '');
+        }
         (_a = $inputWrapper === null || $inputWrapper === void 0 ? void 0 : $inputWrapper.querySelector('[data-form-father-error]')) === null || _a === void 0 ? void 0 : _a.remove();
         $inputWrapper === null || $inputWrapper === void 0 ? void 0 : $inputWrapper.classList.remove('input__wrapper--error');
         if ($inputWrapper && $inputWrapper.classList.contains('input__wrapper')) {
@@ -600,7 +978,7 @@ class Form {
      */
     scrollToFirstErroredInput(inputsList) {
         if (inputsList.length > 0) {
-            const allInputInFormList = Array.from(this.$el.querySelectorAll('input'));
+            const allInputInFormList = Array.from(this.$el.querySelectorAll('input, textarea, select'));
             let $firstInputOnForm = null;
             let minIndex = Infinity;
             inputsList.forEach($input => {
@@ -625,125 +1003,333 @@ class Form {
             }
         }
     }
+    focusFirstErroredInput(inputsList) {
+        var _a;
+        if (inputsList.length === 0)
+            return;
+        const allInputInFormList = Array.from(this.$el.querySelectorAll('input, textarea, select'));
+        const $firstInputOnForm = inputsList
+            .slice()
+            .sort((a, b) => allInputInFormList.indexOf(a) - allInputInFormList.indexOf(b))[0];
+        (_a = $firstInputOnForm === null || $firstInputOnForm === void 0 ? void 0 : $firstInputOnForm.focus) === null || _a === void 0 ? void 0 : _a.call($firstInputOnForm, { preventScroll: true });
+    }
+    getValidationSchema() {
+        return Object.assign(Object.assign({}, (Form.defaultValidationSchema || {})), (this.config.validationSchema || {}));
+    }
+    getAllFields($block = this.$el) {
+        return Array.from($block.querySelectorAll('input, textarea, select'));
+    }
+    getFieldKey($input) {
+        return $input.name || $input.id || $input.getAttribute('data-field') || $input.type || 'field';
+    }
+    hasFieldError($input) {
+        const field = this.getFieldKey($input);
+        return $input.getAttribute('aria-invalid') === 'true' || this.errors.some(error => error.field === field);
+    }
+    clearFieldErrorRecord($input) {
+        const field = this.getFieldKey($input);
+        this.errors = this.errors.filter(error => error.field !== field);
+    }
+    setErrorRecord(field, rule, message, source) {
+        this.errors.push({
+            field,
+            rule,
+            message,
+            source,
+        });
+    }
+    getValidationStateAttribute() {
+        return this.config.validationStateAttribute || 'data-form-father-state';
+    }
+    setFieldValidationState($input, state) {
+        const attr = this.getValidationStateAttribute();
+        if (state) {
+            $input.setAttribute(attr, state);
+        }
+        else {
+            $input.removeAttribute(attr);
+        }
+    }
+    startFieldValidation($input) {
+        const token = ++this.fieldValidationTokenCounter;
+        this.fieldValidationTokens.set($input, token);
+        $input.setAttribute('aria-busy', 'true');
+        this.setFieldValidationState($input, 'validating');
+        return token;
+    }
+    isLatestFieldValidation($input, token) {
+        return token == null || this.fieldValidationTokens.get($input) === token;
+    }
+    finishFieldValidation($input, token, isValid) {
+        if (!this.isLatestFieldValidation($input, token))
+            return;
+        $input.removeAttribute('aria-busy');
+        this.setFieldValidationState($input, isValid ? 'valid' : 'invalid');
+    }
+    clearFieldValidationState($input) {
+        this.fieldValidationTokens.delete($input);
+        $input.removeAttribute('aria-busy');
+        this.setFieldValidationState($input, null);
+    }
+    setValidationError($input, rule, message, source) {
+        this.clearFieldErrorRecord($input);
+        this.setErrorRecord(this.getFieldKey($input), rule, message, source);
+    }
+    resolveField(field) {
+        if (typeof field !== 'string')
+            return field;
+        return this.findFieldByName(field);
+    }
+    parseRuleString(ruleString) {
+        const [rule, ...params] = ruleString.split(':').map(s => s.trim());
+        return params.length > 0 ? { rule, params: params.length === 1 ? params[0] : params } : rule;
+    }
+    parseValidationAttribute(value) {
+        return (value !== null && value !== void 0 ? value : '')
+            .split(/[,\s|]+/)
+            .map(s => s.trim())
+            .filter(Boolean)
+            .map(ruleString => this.parseRuleString(ruleString));
+    }
+    getRuleName(rule) {
+        return typeof rule === 'string' ? rule : rule.rule;
+    }
+    getRuleIdentity(rule) {
+        return JSON.stringify(rule);
+    }
+    collectRules($input, fromSchema = [], schemaKeys = new Set()) {
+        const list = [];
+        if ($input.hasAttribute('required'))
+            list.push('required');
+        list.push(...fromSchema);
+        const dataValidateRules = this.parseValidationAttribute($input.getAttribute('data-validate')).filter(rule => {
+            const ruleName = this.getRuleName(rule);
+            return getValidator(ruleName) || !schemaKeys.has(ruleName);
+        });
+        list.push(...dataValidateRules);
+        list.push(...this.parseValidationAttribute($input.getAttribute('data-custom-validate')));
+        const filtered = [];
+        const seen = new Set();
+        for (const rule of list) {
+            const ruleName = this.getRuleName(rule);
+            if (!getValidator(ruleName)) {
+                console.warn(`[FormFather] Unknown validation rule "${ruleName}"`);
+                continue;
+            }
+            const identity = this.getRuleIdentity(rule);
+            if (seen.has(identity))
+                continue;
+            seen.add(identity);
+            filtered.push(rule);
+        }
+        return filtered;
+    }
+    getRuleMessage($input, rule, messages, defaultMessage, overrideMessage) {
+        const attrMessage = $input.getAttribute(`data-error-${rule}`);
+        return overrideMessage || attrMessage || messages[rule] || defaultMessage;
+    }
+    fieldMatchesSchemaDefinition($input, key, def) {
+        if (def.selector) {
+            try {
+                return $input.matches(def.selector);
+            }
+            catch (_a) {
+                console.warn(`[FormFather] Invalid validation selector "${def.selector}"`);
+                return false;
+            }
+        }
+        return this.parseValidationAttribute($input.getAttribute('data-validate')).some(rule => this.getRuleName(rule) === key);
+    }
+    getFieldValidationConfig($input, schema = this.getValidationSchema()) {
+        const rules = [];
+        const messages = {};
+        for (const [key, def] of Object.entries(schema)) {
+            if (!this.fieldMatchesSchemaDefinition($input, key, def))
+                continue;
+            rules.push(...def.rules);
+            Object.assign(messages, def.messages || {});
+        }
+        return {
+            rules: this.collectRules($input, rules, new Set(Object.keys(schema))),
+            messages,
+        };
+    }
+    getValidationFields($block, schema) {
+        const fields = new Set();
+        const addFields = (nodeList) => {
+            Array.from(nodeList).forEach($input => {
+                if ($input instanceof HTMLInputElement ||
+                    $input instanceof HTMLTextAreaElement ||
+                    $input instanceof HTMLSelectElement) {
+                    fields.add($input);
+                }
+            });
+        };
+        for (const [key, def] of Object.entries(schema)) {
+            if (def.selector) {
+                try {
+                    addFields($block.querySelectorAll(def.selector));
+                }
+                catch (_a) {
+                    console.warn(`[FormFather] Invalid validation selector "${def.selector}"`);
+                }
+                continue;
+            }
+            this.getAllFields($block)
+                .filter($input => this.parseValidationAttribute($input.getAttribute('data-validate')).some(rule => this.getRuleName(rule) === key))
+                .forEach($input => fields.add($input));
+        }
+        addFields($block.querySelectorAll('[required], [data-validate], [data-custom-validate]'));
+        return Array.from(fields);
+    }
+    validateInput($input_1, rules_1) {
+        return __awaiter(this, arguments, void 0, function* ($input, rules, messages = {}, $block = this.$el, validationToken) {
+            if ($input.hasAttribute('data-no-validate'))
+                return true;
+            const isCheckable = $input instanceof HTMLInputElement && ($input.type === 'checkbox' || $input.type === 'radio');
+            const empty = isCheckable ? !$input.checked : $input.value.trim().length === 0;
+            const hasRequiredRule = rules.some(rule => this.getRuleName(rule) === 'required');
+            if (empty && !hasRequiredRule) {
+                if (!this.isLatestFieldValidation($input, validationToken))
+                    return !this.hasFieldError($input);
+                this.clearFieldErrorRecord($input);
+                this.hideError($input);
+                return true;
+            }
+            for (const validationRule of rules) {
+                const { rule, params } = typeof validationRule === 'string'
+                    ? { rule: validationRule, params: undefined }
+                    : { rule: validationRule.rule, params: validationRule.params };
+                const validator = getValidator(rule);
+                if (!validator)
+                    continue;
+                const raw = yield validator.fn($input.value, $input, $block, params);
+                const isObjectResult = typeof raw === 'object' && raw !== null;
+                const passed = isObjectResult ? raw.valid === true : !!raw;
+                if (!this.isLatestFieldValidation($input, validationToken))
+                    return !this.hasFieldError($input);
+                if (isObjectResult && raw.effect) {
+                    yield raw.effect({
+                        value: $input.value,
+                        $input,
+                        $form: $block,
+                        params,
+                    });
+                }
+                if (!this.isLatestFieldValidation($input, validationToken))
+                    return !this.hasFieldError($input);
+                if (!passed) {
+                    const result = raw;
+                    const message = this.getRuleMessage($input, rule, messages, validator.defaultMessage, isObjectResult && typeof result.message === 'string' ? result.message : undefined);
+                    this.setValidationError($input, rule, message, 'client');
+                    this.showError($input, message);
+                    return false;
+                }
+                if (isObjectResult && raw.stopOthers) {
+                    return true;
+                }
+            }
+            if (!this.isLatestFieldValidation($input, validationToken))
+                return !this.hasFieldError($input);
+            this.clearFieldErrorRecord($input);
+            this.hideError($input);
+            return true;
+        });
+    }
+    runFieldValidation($input_1, rules_1) {
+        return __awaiter(this, arguments, void 0, function* ($input, rules, messages = {}, $block = this.$el) {
+            const validationToken = this.startFieldValidation($input);
+            try {
+                const isValid = yield this.validateInput($input, rules, messages, $block, validationToken);
+                this.finishFieldValidation($input, validationToken, isValid);
+                return isValid;
+            }
+            catch (error) {
+                if (this.isLatestFieldValidation($input, validationToken)) {
+                    this.clearFieldValidationState($input);
+                }
+                throw error;
+            }
+        });
+    }
+    getRadioGroup($input, $block) {
+        if (!($input instanceof HTMLInputElement) || $input.type !== 'radio' || !$input.name)
+            return [];
+        return Array.from($block.querySelectorAll('input[type="radio"]')).filter($radio => $radio.name === $input.name);
+    }
+    /** Показывает ошибку конкретного поля по имени или DOM-элементу. */
+    showFieldError(field, message, source = 'manual', rule = source) {
+        const $field = this.resolveField(field);
+        if (!$field) {
+            console.warn(`[FormFather] Field "${String(field)}" not found`);
+            return false;
+        }
+        this.setValidationError($field, rule, message, source);
+        this.showError($field, message);
+        $field.removeAttribute('aria-busy');
+        this.setFieldValidationState($field, 'invalid');
+        return true;
+    }
+    /** Проверяет одно поле по имени или DOM-элементу. */
+    validateField(field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const $field = this.resolveField(field);
+            if (!$field) {
+                console.warn(`[FormFather] Field "${String(field)}" not found`);
+                return false;
+            }
+            const { rules, messages } = this.getFieldValidationConfig($field);
+            return this.runFieldValidation($field, rules, messages);
+        });
+    }
     /**
      * Проверяет все поля ввода.
      *
-     * Порядок для КАЖДОГО `<input>`:
+     * Порядок для каждого поля:
      *
      * 1. `required` — если атрибут `required`
      * 2. правила из `validationSchema`
-     * 3. правила из `data-custom-validate`
+     * 3. правила из `data-validate`
+     * 4. правила из `data-custom-validate`
      *
      * Для одного поля показывается только первая ошибка. Неизвестные правила фиксируются `console.warn` и исключаются ДО
-     * валидации, поэтому валидационный цикл больше не проверяет их наличие.
+     * валидации.
      */
     validate() {
         return __awaiter(this, arguments, void 0, function* ($block = this.$el) {
-            /* ---------- финальная схема (defaults + config) ---------- */
-            const schema = Object.assign(Object.assign({}, (Form.defaultValidationSchema || {})), (this.config.validationSchema || {}));
-            const warnUnknown = (r) => console.warn(`[FormFather] Unknown validation rule "${r}"`);
+            const schema = this.getValidationSchema();
             const erroredInputs = [];
             const processed = new WeakSet();
             let ok = true;
-            /* ---------- helpers ---------- */
-            /** Собирает и тут же фильтрует unknown-rules */
-            const collectRules = ($input, fromSchema = []) => {
-                var _a;
-                const list = [];
-                if ($input.hasAttribute('required'))
-                    list.push('required'); // 1
-                list.push(...fromSchema); // 2
-                const custom = ((_a = $input.getAttribute('data-custom-validate')) !== null && _a !== void 0 ? _a : '')
-                    .split(',')
-                    .map(s => s.trim())
-                    .filter(Boolean);
-                list.push(...custom.map(ruleString => {
-                    const [rule, ...params] = ruleString.split(':').map(s => s.trim());
-                    return params.length > 0 ? { rule, params: params.length === 1 ? params[0] : params } : rule;
-                })); // 3
-                /* —–– предварительная фильтрация unknown ––– */
-                const filtered = [];
-                for (const r of list) {
-                    const ruleName = typeof r === 'string' ? r : r.rule;
-                    if (getValidator(ruleName))
-                        filtered.push(r);
-                    else
-                        warnUnknown(ruleName);
+            this.errors = [];
+            for (const $input of this.getValidationFields($block, schema)) {
+                if (processed.has($input))
+                    continue;
+                const radioGroup = this.getRadioGroup($input, $block);
+                if (radioGroup.length > 0) {
+                    radioGroup.forEach($radio => processed.add($radio));
                 }
-                return filtered;
-            };
-            const validateInput = ($input_1, rules_1, ...args_1) => __awaiter(this, [$input_1, rules_1, ...args_1], void 0, function* ($input, rules, msgs = {}) {
-                if ($input.hasAttribute('data-no-validate'))
-                    return;
-                const empty = $input.type === 'checkbox' || $input.type === 'radio' ? !$input.checked : $input.value.trim().length === 0;
-                const hasRequiredRule = rules.some(r => (typeof r === 'string' ? r === 'required' : r.rule === 'required'));
-                if (empty && !hasRequiredRule) {
-                    this.hideError($input);
-                    return;
-                }
-                for (const r of rules) {
-                    const { rule, params } = typeof r === 'string' ? { rule: r, params: undefined } : r;
-                    const vd = getValidator(rule); // гарантированно существует
-                    const raw = yield vd.fn($input.value, $input, $block, params);
-                    const isObj = typeof raw === 'object' && raw !== null;
-                    const passed = isObj ? raw.valid === true : !!raw;
-                    // сайд-эффект (если есть)
-                    if (isObj && raw.effect) {
-                        yield raw.effect({
-                            value: $input.value,
-                            $input,
-                            $form: $block,
-                            params,
-                        });
-                    }
-                    if (!passed) {
-                        ok = false;
-                        const r = raw;
-                        const msg = (isObj && typeof r.message === 'string' && r.message) || msgs[rule] || vd.defaultMessage;
-                        this.showError($input, msg);
-                        erroredInputs.push($input);
-                        return; // первую ошибку отобразили
-                    }
-                    // хотим прервать цепочку правил, даже если успех
-                    if (isObj && raw.stopOthers) {
-                        return;
-                    }
-                }
-                this.hideError($input);
-            });
-            const getRadioGroup = ($input) => {
-                if ($input.type !== 'radio' || !$input.name)
-                    return [];
-                return Array.from($block.querySelectorAll('input[type="radio"]')).filter($radio => $radio.name === $input.name);
-            };
-            /* ---------- 1. inputs из schema (config + defaults) ---------- */
-            for (const [key, def] of Object.entries(schema)) {
-                const { selector, rules = [], messages = {} } = def;
-                const nodeList = selector
-                    ? $block.querySelectorAll(selector) // явный CSS-селектор
-                    : $block.querySelectorAll(`[data-validate="${key}"]`); // fallback по name
-                for (const $input of Array.from(nodeList)) {
-                    if (processed.has($input))
-                        continue;
-                    const radioGroup = getRadioGroup($input);
-                    if (radioGroup.length > 0) {
-                        radioGroup.forEach($radio => processed.add($radio));
-                        yield validateInput($input, collectRules($input, rules), messages);
-                        continue;
-                    }
+                else {
                     processed.add($input);
-                    yield validateInput($input, collectRules($input, rules), messages);
+                }
+                const { rules, messages } = this.getFieldValidationConfig($input, schema);
+                const fieldValid = yield this.runFieldValidation($input, rules, messages, $block);
+                if (!fieldValid) {
+                    ok = false;
+                    erroredInputs.push($input);
                 }
             }
-            /* ---------- 2. inputs только с data-custom ---------- */
-            const rest = Array.from($block.querySelectorAll('[data-custom-validate]')).filter($i => !processed.has($i));
-            for (const $input of rest) {
-                processed.add($input);
-                yield validateInput($input, collectRules($input, []));
+            const formValidation = yield this.validateFormValidators();
+            if (!formValidation.ok) {
+                ok = false;
+                erroredInputs.push(...formValidation.erroredInputs);
             }
-            /* ---------- scroll ---------- */
+            const visibleErroredInputs = erroredInputs.filter(item => !item.hasAttribute('data-no-error-scroll'));
             if (!ok && this.config.scrollToFirstErroredInput) {
-                this.scrollToFirstErroredInput(erroredInputs.filter(item => !item.hasAttribute('data-no-error-scroll')));
+                this.scrollToFirstErroredInput(visibleErroredInputs);
+            }
+            if (!ok && this.config.focusFirstErroredInput) {
+                this.focusFirstErroredInput(visibleErroredInputs);
             }
             return ok;
         });
@@ -949,6 +1535,7 @@ class Form {
     }
     /** Полностью снимает слушатели и чистит артефакты формы. */
     destroy() {
+        var _a;
         // 1) Снять submit-слушатель
         if (this._onSubmitHandler) {
             this.$el.removeEventListener('submit', this._onSubmitHandler);
@@ -961,6 +1548,9 @@ class Form {
             });
             this._onSubmitClickHandler = undefined;
         }
+        this.clearFieldValidationEvents();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = undefined;
         // 2) Удалить формовый error-блок под инпутами (если есть)
         const formErrorWrapper = this.$el.querySelector('.error-block-under-input__wrapper');
         if (formErrorWrapper) {
@@ -976,13 +1566,18 @@ class Form {
         });
         // 4) Сбросить ошибки у инпутов (если разметка позволяет)
         const inputs = this.$el.querySelectorAll('input, textarea, select');
-        inputs.forEach($i => this.hideError($i));
+        inputs.forEach($i => {
+            this.hideError($i);
+            this.clearFieldValidationState($i);
+        });
         // 5) Убрать возможный флаг скролла
         document.documentElement.removeAttribute('data-now-scrolling');
         // 6) Очистить ссылки на элементы, чтобы помочь GC
         this.inputs = null;
         this.$submits = [];
+        this.errors = [];
         this.waitResponse = false;
+        FORM_INSTANCES.delete(this.$el);
     }
     /**
      * Проверяет входные данные на их корректность.
@@ -1099,7 +1694,10 @@ class Form {
                 const $field = this.findFieldByName(error.name);
                 if ($field) {
                     fieldsList.push($field);
+                    this.setValidationError($field, 'server', error['error-msg'], 'server');
                     this.showError($field, error['error-msg']);
+                    $field.removeAttribute('aria-busy');
+                    this.setFieldValidationState($field, 'invalid');
                 }
                 else {
                     console.warn(`Не найдено поле с именем: ${error.name}, для вывода ошибки: ${error['error-msg']}`);
@@ -1107,6 +1705,8 @@ class Form {
             });
             if (this.config.scrollToFirstErroredInput === true)
                 this.scrollToFirstErroredInput(fieldsList);
+            if (this.config.focusFirstErroredInput === true)
+                this.focusFirstErroredInput(fieldsList);
         }
     }
     sendData() {
@@ -1167,12 +1767,8 @@ class Form {
     }
     submit() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             if (!this.waitResponse) {
-                if (this.config.showLoaderButton === true)
-                    this.showLoader();
-                (_b = (_a = this.config).onSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, this);
-                this.waitResponse = true;
                 let loadingFinished = false;
                 const finishLoading = () => {
                     if (loadingFinished)
@@ -1183,27 +1779,44 @@ class Form {
                     loadingFinished = true;
                 };
                 try {
+                    const beforeSubmitResult = yield ((_b = (_a = this.config).onBeforeSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, this));
+                    if (beforeSubmitResult === false) {
+                        return {
+                            success: false,
+                        };
+                    }
+                    if (this.config.showLoaderButton === true)
+                        this.showLoader();
+                    (_d = (_c = this.config).onSubmit) === null || _d === void 0 ? void 0 : _d.call(_c, this);
+                    this.waitResponse = true;
                     const response = yield this.sendData();
                     const responseBody = yield this.parseResponseBody(response);
                     finishLoading();
-                    (_d = (_c = this.config).onResponse) === null || _d === void 0 ? void 0 : _d.call(_c, responseBody, this);
+                    (_f = (_e = this.config).onResponse) === null || _f === void 0 ? void 0 : _f.call(_e, responseBody, this);
                     if (response.ok && responseBody.success === true) {
-                        (_f = (_e = this.config).onResponseSuccess) === null || _f === void 0 ? void 0 : _f.call(_e, responseBody, this);
+                        (_h = (_g = this.config).onResponseSuccess) === null || _h === void 0 ? void 0 : _h.call(_g, responseBody, this);
                     }
                     else {
-                        (_h = (_g = this.config).onResponseUnsuccess) === null || _h === void 0 ? void 0 : _h.call(_g, responseBody, this);
+                        (_k = (_j = this.config).onResponseUnsuccess) === null || _k === void 0 ? void 0 : _k.call(_j, responseBody, this);
                         this.handleUnsuccessfulResponse(responseBody);
                     }
                     parseCommonResponseProperties(responseBody);
+                    return {
+                        success: response.ok && responseBody.success === true,
+                        response,
+                        responseBody,
+                    };
                 }
                 catch (error) {
                     finishLoading();
+                    (_m = (_l = this.config).onSubmitError) === null || _m === void 0 ? void 0 : _m.call(_l, error, this);
                     throw error;
                 }
             }
+            return undefined;
         });
     }
 }
 
-export { blockScrollBody, closest, Form as default, getAllValidators, getValidator, isEmailValid, isPhoneValid, isUrlValid, parseCommonResponseProperties, registerValidator, serializeFormToJSON, serializeToFormData, unblockScrollBody };
+export { FORM_ERROR_FIELD, blockScrollBody, closest, createFieldValidator, createSchemaValidator, Form as default, getAllValidators, getValidator, isEmailValid, isPhoneValid, isUrlValid, parseCommonResponseProperties, registerSchemaValidator, registerValidator, serializeFormToJSON, serializeToFormData, unblockScrollBody };
 //# sourceMappingURL=index.js.map