onincomplete

Обработчик onincomplete в библиотеке Inputmask вызывается в момент, когда поле теряет фокус, но введённое значение не соответствует полностью заполненной маске. Это один из ключевых механизмов контроля корректности ввода на стороне интерфейса.

Событие особенно полезно в следующих сценариях:

  • телефон введён не полностью;
  • дата содержит пропущенные символы;
  • пользователь покинул поле раньше завершения ввода;
  • часть обязательных секций маски осталась пустой;
  • требуется собственная реакция на незавершённое значение.

onincomplete относится к набору callback-обработчиков библиотеки и работает совместно с системой проверки полноты маски.

Базовый синтаксис

Inputmask({
    mask: "+7 (999) 999-99-99",
    onincomplete: function () {
        console.log("Маска заполнена не полностью");
    }
}).mask("#phone");

Если пользователь введёт:

+7 (777) 12

и затем покинет поле, обработчик будет вызван.

Когда именно срабатывает onincomplete

Обработчик активируется при соблюдении нескольких условий одновременно:

  1. Поле потеряло фокус (blur);
  2. Маска считается незавершённой;
  3. Ввод не соответствует требованиям полной маски.

Пример:

Inputmask({
    mask: "99/99/9999",
    onincomplete: function () {
        console.log("Дата введена не полностью");
    }
}).mask("#date");

Сценарии вызова

Ввод Результат
12/05/2025 обработчик НЕ вызывается
12/05/ вызывается
12/ вызывается
пустое поле зависит от настроек

Отличие onincomplete от oncomplete

Очень важно понимать различие между этими обработчиками.

oncomplete

Срабатывает, когда маска полностью заполнена.

oncomplete: function () {
    console.log("Заполнение завершено");
}

onincomplete

Срабатывает, когда ввод остался незавершённым.

onincomplete: function () {
    console.log("Заполнение не завершено");
}

Сравнение

Ситуация oncomplete onincomplete
Маска полностью заполнена Да Нет
Маска заполнена частично Нет Да
Пользователь ушёл из поля Возможен вызов Возможен вызов
Значение соответствует шаблону Да Нет

Аргументы обработчика

onincomplete получает контекст текущего input-элемента через this.

Пример:

Inputmask({
    mask: "+7 (999) 999-99-99",
    onincomplete: function () {
        console.log(this.value);
    }
}).mask("#phone");

При неполном вводе:

+7 (777) 1

в консоль попадёт текущее содержимое поля.

Получение DOM-элемента

Часто требуется изменить оформление поля.

Inputmask({
    mask: "9999 9999 9999 9999",
    onincomplete: function () {
        this.style.border = "2px solid red";
    }
}).mask("#card");

После потери фокуса поле станет визуально отмеченным как некорректное.

Использование с сообщениями об ошибке

Один из наиболее распространённых сценариев — отображение ошибок формы.

Inputmask({
    mask: "+7 (999) 999-99-99",
    onincomplete: function () {
        document.querySelector("#error").textContent =
            "Введите номер телефона полностью";
    }
}).mask("#phone");

Очистка ошибок при успешном вводе

Обычно onincomplete комбинируют с oncomplete.

Inputmask({
    mask: "+7 (999) 999-99-99",

    oncomplete: function () {
        document.querySelector("#error").textContent = "";
    },

    onincomplete: function () {
        document.querySelector("#error").textContent =
            "Телефон введён не полностью";
    }

}).mask("#phone");

Использование с CSS-классами

Более правильный подход — управление классами вместо прямого изменения стилей.

Inputmask({
    mask: "99/99/9999",

    onincomplete: function () {
        this.classList.add("invalid");
    },

    oncomplete: function () {
        this.classList.remove("invalid");
    }

}).mask("#date");

CSS:

.invalid {
    border-color: red;
    background: #ffe5e5;
}

Проверка заполненности номера телефона

Типичный пример использования.

Inputmask({
    mask: "+1 (999) 999-9999",

    onincomplete: function () {
        alert("Введите телефон полностью");
    }

}).mask("#phone");

Если пользователь введёт:

+1 (555) 12

то после потери фокуса появится сообщение.

Поведение с optional-частями маски

onincomplete учитывает необязательные сегменты.

Пример:

Inputmask({
    mask: "(999) 999-9999[ x99999]",

    onincomplete: function () {
        console.log("Основная часть заполнена не полностью");
    }

}).mask("#phone");

Важный момент

Если заполнена только обязательная часть:

(555) 123-4567

обработчик не вызовется.

Но если обязательная часть незавершена:

(555) 12

onincomplete сработает.

Взаимодействие с clearIncomplete

Параметр clearIncomplete автоматически очищает поле при незавершённом вводе.

Inputmask({
    mask: "99/99/9999",
    clearIncomplete: true,

    onincomplete: function () {
        console.log("Поле будет очищено");
    }

}).mask("#date");

Последовательность действий

  1. Пользователь вводит неполное значение;
  2. Происходит blur;
  3. Вызывается onincomplete;
  4. Поле очищается.

Использование с AJAX-валидацией

Иногда неполный ввод запрещает отправку запроса.

Inputmask({
    mask: "+7 (999) 999-99-99",

    onincomplete: function () {
        window.phoneReady = false;
    },

    oncomplete: function () {
        window.phoneReady = true;
    }

}).mask("#phone");

Позже:

form.addEventListener("submit", function (e) {

    if (!window.phoneReady) {
        e.preventDefault();
    }

});

Работа с несколькими полями

document.querySelectorAll(".phone").forEach(function (element) {

    Inputmask({
        mask: "+7 (999) 999-99-99",

        onincomplete: function () {
            this.classList.add("error");
        },

        oncomplete: function () {
            this.classList.remove("error");
        }

    }).mask(element);

});

Использование стрелочных функций

Стрелочные функции использовать не рекомендуется.

Неправильно:

Inputmask({
    mask: "99/99/9999",

    onincomplete: () => {
        console.log(this);
    }

}).mask("#date");

Здесь this не будет ссылаться на input.

Правильно:

Inputmask({
    mask: "99/99/9999",

    onincomplete: function () {
        console.log(this);
    }

}).mask("#date");

Получение объекта Inputmask

Через DOM-элемент можно получить экземпляр маски.

Inputmask({
    mask: "+7 (999) 999-99-99",

    onincomplete: function () {

        console.log(this.inputmask);

    }

}).mask("#phone");

Проверка незавершённой даты

Inputmask({
    mask: "99/99/9999",

    onincomplete: function () {

        const error = document.querySelector("#date-error");

        error.textContent =
            "Дата должна содержать день, месяц и год";

    }

}).mask("#date");

Использование вместе с isComplete

Внутри обработчика можно вручную проверять состояние маски.

Inputmask({
    mask: "+7 (999) 999-99-99",

    onincomplete: function () {

        console.log(
            this.inputmask.isComplete()
        );

    }

}).mask("#phone");

Результат:

false

Частичное заполнение и placeholder

Поведение onincomplete тесно связано с placeholder-символами.

Inputmask({
    mask: "99/99/9999",
    placeholder: "_",

    onincomplete: function () {
        console.log(this.value);
    }

}).mask("#date");

При вводе:

12/05/____

маска считается незавершённой.

Использование с динамическими масками

Inputmask({
    mask: [
        "+7 (999) 999-99-99",
        "+1 (999) 999-9999"
    ],

    onincomplete: function () {
        console.log("Номер введён не полностью");
    }

}).mask("#phone");

Обработчик будет учитывать активную маску, выбранную библиотекой автоматически.

Отмена отправки формы

const form = document.querySelector("#form");

form.addEventListener("submit", function (e) {

    const phone = document.querySelector("#phone");

    if (!phone.inputmask.isComplete()) {

        e.preventDefault();

        phone.focus();

    }

});

Вместе с onincomplete:

Inputmask({
    mask: "+7 (999) 999-99-99",

    onincomplete: function () {

        this.classList.add("invalid");

    }

}).mask("#phone");

Работа с email-масками

Inputmask({
    alias: "email",

    onincomplete: function () {
        console.log("Email заполнен не полностью");
    }

}).mask("#email");

Пример неполного ввода:

test@

Использование в React

useEffect(() => {

    Inputmask({
        mask: "+7 (999) 999-99-99",

        onincomplete: function () {
            console.log("Ошибка телефона");
        }

    }).mask(inputRef.current);

}, []);

Использование в Vue

mounted() {

    Inputmask({
        mask: "99/99/9999",

        onincomplete: function () {
            console.log("Неполная дата");
        }

    }).mask(this.$refs.date);

}

Типичные ошибки

Использование стрелочных функций

onincomplete: () => {}

Теряется контекст this.

Ожидание вызова без blur

onincomplete обычно вызывается после потери фокуса.

Пока поле активно, callback может не срабатывать.

Путаница с oncleared

oncleared вызывается при очистке поля, а не при неполном вводе.

oncleared: function () {
    console.log("Поле очищено");
}

Игнорирование optional-секций

Необязательные блоки не влияют на полноту маски.

Практический пример полной валидации

<input id="phone">
<div id="phone-error"></div>
Inputmask({
    mask: "+7 (999) 999-99-99",

    oncomplete: function () {

        this.classList.remove("invalid");

        document.querySelector("#phone-error")
            .textContent = "";

    },

    onincomplete: function () {

        this.classList.add("invalid");

        document.querySelector("#phone-error")
            .textContent =
            "Введите номер телефона полностью";

    }

}).mask("#phone");
.invalid {
    border: 2px solid red;
}

Связь с UX формы

onincomplete значительно улучшает пользовательский интерфейс:

  • показывает незавершённые поля;
  • предотвращает отправку неполных данных;
  • помогает реализовать интерактивную валидацию;
  • упрощает визуальную индикацию ошибок;
  • позволяет синхронизировать состояние формы с логикой приложения.

Особенно полезен обработчик в:

  • банковских формах;
  • телефонных формах;
  • регистрациях;
  • CRM-системах;
  • checkout-формах;
  • административных интерфейсах.
Оглавление